动态添加html到面板

我正在设计一个sencha touch2应用程序。我在我的JS文件中有一个面板对象。我需要动态设置这个组件的文本/ html。该组件的存储在应用程序级别定义。以下是我的工作：动态添加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（）不是一个好的做法，并且希望避免它，因为它可能会在某处破坏我的代码。

我想我实例化面板对象的方式是创建一些问题。有人可以建议做到这一点的最佳方式？

来源

2012-04-18 techie

在Sencha Touch 2中操纵组件的推荐方式是使用控制器，通过refs和control configs。例如，你的面板具有这样的配置：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：幕后，煎茶触摸2层的用途Ext.ComponentQuery for refs in controllers

来源

2012-04-18 21:10:26

动态添加html到面板

回答

相关问题