向面板动态添加html

Question

我正在设计一个应用程序在森查touch2。我的JS文件中有一个面板对象。我需要动态地设置这个组件的text/html。此组件的存储在应用程序级别定义。以下是我所做的工作：

Ext.define('class_name',{

....

config : {

  pnlObj : null,

  ...
}

initialize : function() {

    this.config.pnlObj = Ext.create('Ext.Panel');
    var store = Ext.data.Storemanager.lookup('some_store');
    store.on('load',this.loadStore,this);
    this.setItems([{
     //some items here
     {
     flex : 2,
//   id : 'somepnl',

     config : this.config.pnlObj
}

}]);

},

loadStore : function(store, rec) {

     var text = rec.get('text');
     var panel = this.config.pnlObj;
//   var panel = Ext.getCmp('somepanl');
     panel.setHtml(text);

}


});

当我使用Firebug控制台检查元素时，我可以找到添加在那里的面板。但是我不能动态地设置html。那里没有设置html文本。我尝试使用panel.add() & panel.setItems()方法添加它，但是这个方法不能工作。如果我给该面板提供一个id (这里是somepanel)，并尝试使用Ext.getCmp('smpanel')访问它，那么在这种情况下，它可以正常工作。我发现使用Ext.getCmp()不是一个好的实践，我希望避免它，因为它可能会在将来破坏我的代码。

我想我实例化面板对象的方式正在产生一些问题。有人能建议最好的方法吗？

Answer 1

在Sencha 2中操作组件的推荐方法是使用控制器，通过refs和control吐露。例如，您的面板具有如下配置：xtype:'myPanel'，然后在控制器中：

refs: {
   myPanel: 'myPanel'
}

control:{
   myPanel: {
     on_an_event: 'set_html_for_my_panel'
   }
}

最后，定义您的功能：

set_html_for_my_panel: function()
{
   this.getMyPanel().setHtml('my_updated_html');
}

P/S:在场景背后，Sencha 2在控制器中使用Ext.ComponentQuery实现refs