Sencha 2.x MVC：通过id获取元素 [英] Sencha 2.x MVC: Get element by id

问题描述

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

app / app.js

  Ext .Loader.setConfig（{
 enabled：true 
}）; 
 Ext.application（{
 name：'App'，
 controllers：['Generators']，
 models：[]，
 stores：[]，
视图：['Main'，'Generator']，
 launch：function（）{
 Ext.create（'App.view.Main'）; 
} 
}）; 
  

app / view / Main.js

  Ext.define（'App.view.Main'，{
 extends：'Ext.NavigationView'，
要求：[
'App.view .Generator'
]，
 
 config：{
 fullscreen：true，
 items：[
 {
 xtype：'generatorview'
} 
] 
} 
}）; 
  

app / view / Generator.js

  Ext.define（'App.view.Generator'，{
 extends：'Ext.Container'，
 xtype：'generatorview'，
 id ：'generator'，
 config：{
 layout：'vbox'，
 items：[
 {
 xtype：'panel'，
 html： '我的消息：< 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'，{
 extends：'Ext.app.Controller'，
 config：{
 refs： {} 
}，
 init：function（）{
 this.control（{
'#xxxSet'：{// QUESTION1 
点击：'setMyMessage'
} 
}）; 
}，
 
 setMyMessage：function（）{
'＃xxxMsg'.html（'Set this message'）; / / QUESTION2 
} 
}）; 
  

您可以看到我在最后一部分（控制器）中提出问题。

• QUESTION1：如何将视图中定义的元素（#xxxSet）
  设置为HTML内容。


• QUESTION2：如何设置
  消息在视图中定义的元素（#xxxMsg）为HTML
  内容。

xxxSet =按钮的ID

xxxMsg =消息持有人的ID

Thx！

解决方案

您可以使用 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'）; 
} 
  




I just started using Sencha framework 2.x. This is my app:

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
  }
});

As you can see I placed questions in the last part (controller).

• QUESTION1: How can I set a tap function to the element (#xxxSet) defined in the view as HTML content.
• QUESTION2: How can I set a message the the element (#xxxMsg) defined in the view as HTML content.

xxxSet = id of a button

xxxMsg = id of a message holder

Thx!

解决方案

You can use Ext#get (which accepts a string which is the id) which will return a instance of Ext.dom.Element. With that, you can use the on method to add listeners (much like control) and then the setHtml method to update the contents.

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

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

这篇关于Sencha 2.x MVC：通过id获取元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！