extjs-La tienda con carga automática verdadera no debería cargarse en el lanzamiento de la aplicación

extjs4 extjs4.2

Question

Tengo una grilla vinculada a una tienda con autoLoad: true . El problema es que la tienda se carga en el inicio de la aplicación, incluso si la vista se crea solo más tarde cuando se accede a través de un menú.

He hecho referencia a la tienda en Application.js y en la vista, pero no estoy instalando explícitamente ni la tienda ni la vista.

No sé cómo lograr que la tienda solo se cargue cuando lo necesite la vista.

• Si configuro autoLoad: true , la tienda se carga en el inicio de la aplicación.
• Si configuro autoLoad: false , la tienda no se carga en absoluto.

Sé que esto es bastante básico, pero estoy estancado hasta ahora.

Aquí está todo el código relevante para referencia:
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: [{
...

La vista se crea una instancia en el controlador:

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

Dejaría que el controlador de la vista maneje la carga de la tienda.

Comience por deshabilitar la carga automática en la tienda.

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

Si desea cambiar la vista antes o después de cargar la tienda, es otra cuestión.

Answer 2

Este es mi código de controlador final:

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

Pone todo el código en el controlador como lo sugiere @pcguru y utiliza el evento de renderizado para acortar el código como lo sugiere @Lolo. Gracias

Answer 3

Puede agregar el controlador de render para ver cuál llamará al método de load almacén y deshabilitará la load autoLoad .

Oyente de ejemplo:

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