1

我正在 sencha 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() 方法添加它。如果我给那个面板（这里的 somepanel）一个 id 并尝试使用 Ext.getCmp('smpanel') 访问它，那么在这种情况下它工作正常。我发现使用 Ext.getCmp() 不是一个好习惯，我想避免它，因为它可能会在将来某个地方破坏我的代码。

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

4

1 回答 1

5

在 Sencha Touch 2 中操作组件的推荐方法是使用controller、 throughrefs和controlconfigs 。例如，您的面板有这样的配置：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 Touch 2Ext.ComponentQuery用于refs控制器

于 2012-04-18T21:10:26.393 回答