Sencha 2.x MVC：按 id 获取元素答案

【问题标题】：Sencha 2.x MVC: Get element by idSencha 2.x MVC：按 id 获取元素
【发布时间】：2012-02-28 12:06:15
【问题描述】：

我刚开始使用 Sencha 框架 2.x。这是我的应用程序：

app/app.js

Ext.Loader.setConfig({
  enabled: true
});
Ext.application({
  name: 'App',
  controllers: ['Generators'],
  models: [],
  stores: [],
  views: ['Main', 'Generator'],
  launch: function() {
    Ext.create('App.view.Main');
  }
});

app/view/Main.js

Ext.define('App.view.Main', {
  extend: 'Ext.NavigationView',
  requires: [
    'App.view.Generator'
  ],

  config: {
    fullscreen: true,
    items: [
      {
        xtype: 'generatorview'
      }
    ]
  }
});

app/view/Generator.js

Ext.define('App.view.Generator', {
  extend: 'Ext.Container',
  xtype: 'generatorview',
  id: 'generator',
  config: {
    layout: 'vbox',
    items: [
      {
        xtype: 'panel',
        html: 'My message: <a id="xxxSet">Set</a> :: <span id="xxxMsg">...</span>',
        flex: 1
      },
      {
        dock: 'bottom',
        xtype: 'toolbar',
        items: []
      }
    ]
  }
});

app/controller/Generator.js

Ext.define('App.controller.Generators', {
  extend: 'Ext.app.Controller',
  config: {
    refs: {}
  },
  init: function() {
    this.control({
      '#xxxSet': { // QUESTION1
        tap: 'setMyMessage'
      }
    });
  },

  setMyMessage: function() {
    '#xxxMsg'.html('Set this message'); // QUESTION2
  }
});

如您所见，我在最后一部分（控制器）提出了问题。

QUESTION1：如何为元素设置点击功能 (#xxxSet) 在视图中定义为 HTML 内容。
问题 2：如何设置将视图中定义为 HTML 的元素 (#xxxMsg) 发送消息内容。

xxxSet = 按钮的 ID

xxxMsg = 消息持有者的 id

谢谢！

【问题讨论】：

标签： javascript model-view-controller mobile extjs sencha-touch-2

【解决方案1】：

您可以使用Ext#get（它接受一个字符串，即id），它将返回一个Ext.dom.Element 的实例。这样，您可以使用on 方法添加侦听器（很像control），然后使用setHtml 方法更新内容。

init: function() {
    Ext.get('xxxSet').on({
        tap: 'setMyMessage',
        scope: this
    });
},

setMyMessage: function() {
    Ext.get('xxxMsg).setHtml('Hello');
}

【讨论】：

【解决方案2】：

如果您使用itemId，则无法使用Ext.get() 访问它。你可以试试Ext.ComponentQuery.query() 代替那个。

init: function() {
Ext.ComponentQuery.query('#xxxSet').on({
    tap: 'setMyMessage',
    scope: this
  });
},

setMyMessage: function() {
 Ext.ComponentQuery.query('#xxxMsg).setHtml('Hello');
}

【讨论】：