Question

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

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

Answer 1

在Sencha Touch 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 Touch 2在控制器Ext.ComponentQuery中使用refs

动态地将html添加到面板

1 个答案: