動態添加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到面板

回答

相關問題