ExtJSの - 自動ロードとストア真のは、私が<code>autoLoad: true</code>でストアにリンクされたグリッドを持つアプリケーションの起動

Question

に読み込むべきではありません。問題は、ビューが後でメニューからアクセスされたときに作成されたとしても、ストアがアプリケーションの起動時にロードされることです。

私はApplication.jsで、ビューに店を参照しているが、私は明示的に店舗でもビューもないinstatiatingていませんよ。

私は、ビューで必要なときにだけストアがロードされていることを達成する方法がわかりません。

• autoLoad: trueに設定すると、アプリケーションの起動時にストアがロードされます。
• autoLoad: falseを設定すると、ストアがまったく読み込まれません。

私はこれはかなり基本的なものですけど、私はこれまでこだわっています。

ここ

---

基準に関連するすべてのコードである：
APP /ストア/ Owners.js

Ext.define('Mb.store.Owners', { 
    extend: 'Ext.data.Store', 
    model: 'Mb.model.Owner', 
    autoLoad: true, 
    proxy: { 
     ... 
}); 

Application.js

Ext.define('Mb.Application', { 
    name: 'Mb', 
    extend: 'Ext.app.Application', 
    models: [ 
     'Owner' 
    ], 
    stores: [ 
     'Owners' 
    ], 
    ... 

アプリ/ビュー/ Owners.js

Ext.define('Mb.view.winbiz.Owners', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.test-gridPanel', 
    store: 'winbiz.Owners', 
    columns: [{ 
    ... 

ビューは、コントローラ内でインスタンス化されています

Ext.define('Mb.controller.Winbiz', { 
    extend: 'Ext.app.Controller', 
    views: [ 
     'Owners' 
    ], 
    init: function(){ 
     this.control({ 
      'menu #test': {click: this.onMenuTest}, 
     }) 
    }, 
    onMenuTest: function(){ 
     this.getController('Main').addToMainTab('test-gridPanel'); 
    }, 

Answer 1

はあなたが店loadメソッドを呼び出し、autoLoadが無効になりますかを表示するrenderハンドラを追加することができます。

例のリスナー：

Ext.define('Mb.view.winbiz.Owners', { 
    extend: 'Ext.grid.Panel', 
    [...], 

    initComponent: function(){ 
     this.callParent(); 
     this.on('render', this.loadStore, this); 
    }, 

    loadStore: function() { 
     this.getStore().load(); 
    } 
}); 

Answer 2

私は、ビューのコントローラは、店舗の負荷を処理させるでしょう。店舗に自動ロードを無効にすることによって

スタート。

Ext.define('Mb.controller.Winbiz', { 
    extend: 'Ext.app.Controller', 
    views: [ 
     'Owners' 
    ], 
    ownerStore: null, 
    init: function(){ 
     this.control({ 
      'menu #test': {click: this.onMenuTest}, 
     }); 

     this.ownerStore = Ext.getStore('winbiz.Owners'); 
    }, 
    onMenuTest: function() { 
     if (this.ownerStore.loaded === false) { 
      this.ownerStore.load(
       scope: this, 
       callback: this.onOwnerStoreLoaded 
      ); 
     } 
     else { 
      this.addToTab(); 
     }    
    }, 
    onOwnerStoreLoaded: function (store, records, successful, eOpts) { 
     if (successful) { 
      store.loaded = true; 
      this.addToTab(); 
     } 
    }, 
    addToTab: function() { 
     this.getController('Main').addToMainTab('test-gridPanel'); 
    } 

ストアがロードされる前または後にビューを変更したい場合は別の質問です。

Answer 3

これが私の最後のコントローラのコードです：

Ext.define('Mb.controller.Winbiz', { 
    extend: 'Ext.app.Controller', 
    views: [ 
     'Owners' 
    ], 
    refs: [{ref: 'testGrid', selector: 'test-gridPanel'}], 
    init: function(){ 
     this.listen({ 
      store: { 
       '#Owners':{ load: this.onOwnersLoad} 
      } 
     }) 
     this.control({ 
      'menu #test': {click: this.onMenuTest}, 
      'test-gridPanel': {render: this.onOwnersRender} 
     }) 
    }, 
    onMenuTest: function(){ 
     this.getController('Main').addToMainTab('test-gridPanel'); 
    }, 
    onOwnersLoad: function(store){ 
     store.loaded = true 
    }, 
    onOwnersRender: function(){ 
     var store = this.getTestGrid().getStore(); 
     if(!store.loaded)store.load(); 
    }, 

それは@pcguruにより示唆されるようにコントローラにすべてのコードを置き、@Loloによって示唆されているように、コードを短くするためにrenderイベントを使用しています。おかげで、