私はいくつかのモジュールを持つアプリケーションに取り組んでいます。各モジュールは、1 つのコントローラー、モジュール/ストア、およびこれらのストアを使用する多数のビューで構成されます。そこで、メイン コントローラーと 1 つのナビゲーション ビューを作成することにしました。ユーザーがアプリケーションのセクションを変更すると、対応するコントローラーがロードされます。
これは私のメインコントローラーのソースコードです:
Ext.define('My.controller.Navigation', {
extend: 'Ext.app.Controller',
views: ['layout.Navbar'],
_loadedControllers: [],
init: function() {
var me = this;
me.control({
'navbar > tabpanel': {
tabchange: me.handleNavChange
}
});
},
handleNavChange: function(tabPanel, newCard, oldCard, eOpts) {
var app = My.getApplication(),
container = app.getContainerPanel(),
components = Ext.ComponentQuery.query('viewport > panel > panel:not([cls~=bpte-layout])'),
name = this.formatControllerName(newCard.itemId),
i=0;
//Remove initialized widgets:
for(; i < components.length; i++) {
container.remove( components[i], true );
}
//Load and initialize controller:
controller = app.getController(name);
if(this.isControllerLoaded(name))
controller.init();
this.addLoadedController(name);
},
formatControllerName: function(id) {
return id.charAt(0).toUpperCase() + id.substr(1).toLowerCase();
},
isControllerLoaded: function(name) {
for(var i=0; i < this._loadedControllers.length; i++) {
if(this._loadedControllers[i] == name)
return true;
}
return false;
},
addLoadedController: function(name) {
this._loadedControllers.push(name);
}});
そして、これは私のコントローラーの抽象的なソースコードです:
Ext.define('My.controller.ControllerX', {
extend: 'Ext.app.Controller',
stores: ['Store#1','Store#2'],
views: ['Widget#1','Widget#2','Widget#3'],
init: function() {
var container = My.getApplication().getContainerPanel();
container.add( Ext.widget('Widget#1') );
container.add( Ext.widget('Widget#2') );
this.control({ ... });
...
}
...
});
子コントローラーを初めてロードすると、すべて正常に動作します。しかし、もう一度同じ子コントローラーに移動すると、ストアに問題があります。ストアは、複製されているかのように機能します。たとえば、ストアに新しいモデルを追加してからストアを同期すると、1 つではなく 2 つのモデルが追加され、両方がサーバーに送信されます。
私は何を間違っていますか?