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