Geek Answers Handbook

Extjs - Store with true startup should not load at application startup

I have a grid associated with the repository with autoLoad: true . The problem is that the repository is loaded when the application starts, even if the view is created only later when accessed through the menu.

I reference the repository in Application.js and in the view, but I do not explicitly set the repository or the view.

I do not know how to ensure that the repository is loaded only when it is necessary for the presentation.

  • If I set autoLoad: true , the repository will load when the application starts.
  • If I set autoLoad: false , the repository does not load at all.

I know this is pretty simple, but I'm stuck so far.

Here is all the appropriate code for reference:
app / store / 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' ], ...

app / view / Owners.js

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

In the controller, a view is created:

 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'); },
+7
extjs extjs4 extjs-stores
source share
3 answers

You can add a render handler that will call the store load method and disable autoLoad .

Listener example:

 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(); } });
+6
source share

I would let the view controller handle the storage load.

Start by disabling automatic upload to storage.

 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'); }

You want to change the look before or after loading the store, this is another question.

+1
source share

This is my final controller code:

 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(); },

It puts all the code in the controller, as suggested by @pcguru, and uses the render event to shorten the code, as suggested by @Lolo. Thanks

0
source share

More articles:


All Articles