動的にパネルにhtmlを追加

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（）& panel.setItems（）メソッドを使って追加しようとしましたが動作しません。私がそのパネル（ここでsomepanel）にIDを渡し、Ext.getCmp（ 'smpanel'）を使ってアクセスしようとすると、うまくいきます。私は、Ext.getCmp（）を使用することは良い習慣ではなく、将来どこかでコードが破損する可能性があるため、避けたいと考えています。

私はパネルオブジェクトをインスタンス化する方法はいくつかの問題を作成していると思います。誰かがそれをする最善の方法を提案することができますか？

Answer 1

Sencha Touch 2のコンポーネントを操作する場合は、コントローラ〜refsとcontrol configsを使用することをお勧めします。たとえば、あなたのパネルは、このような設定があります：xtype:'myPanel'を、そしてあなたのコントローラで：

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

P/S：

refs: { 
    myPanel: 'myPanel' 
} 

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

最後には、あなたの関数を定義するシーンの背後に、煎茶タッチ2回の使用をコントローラ内のrefsのExt.ComponentQuery