1

sencha touch2 でアプリを設計しています。JS ファイルに panel オブジェクトがあります。このコンポーネントの 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 here) に ID を与え、Ext.getCmp('smpanel') を使用してアクセスしようとすると、その場合は正常に動作します。Ext.getCmp() を使用することは良い習慣ではないことがわかりました。将来、どこかでコードが壊れる可能性があるため、使用を避けたいと考えています。

パネルオブジェクトをインスタンス化する方法が問題を引き起こしていると思います。誰かがそれを行う最善の方法を提案できますか?

4

1 に答える 1

5

Sencha Touch 2 でコンポーネントを操作するための推奨される方法は、controller、 through refs、および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 2 はコントローラー内で使用Ext.ComponentQueryしますrefs

于 2012-04-18T21:10:26.393 に答える