Store loading order

Question

My code of App.js here:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'KP',
    appFolder: 'scripts/app',

    controllers: [
        'MainSearch', 'List'
    ],

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            items: {
                xtype: 'searchdata'
            }
        });
    }
});

The problem is : I have model('List'),store('List'),view('List') and controller('List') - all of this for my grid. In store('List') I called the service, which give to me some data.

I want to view my grid after the "MainSearch" form. So, I called "MainSearch" first. (in App.js). But, before the form "MainSearch" is displayed in my browser, the service in 'List' was called. I not understand why it happen. (when the 'List' controller is not included in App.js - all works fine)

The "List"'s 'Store' code:

Ext.define('KP.store.List', {

    extend: 'Ext.data.Store',
    model: 'KP.model.List',          

    autoLoad: true,

    pageSize: 20,
    autoLoad: { start: 0, limit: 20 },


    autoSync: true,
    proxy: {
        type: 'ajax',
        limitParam: 'size',
        startParam: undefined,
        api: {

        read: '/adres/listls'
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success',
            totalProperty: 'total'
        }     
    }

});

'List' controller code:

Ext.define('KP.controller.List', {

    extend: 'Ext.app.Controller',

    views: ['personAccount.List'],
    models: ['List'],
    stores: ['List'],

    init: function () {
        this.control({
            'list button[action=close]': {
                click: this.closeClick
            }
        });
    },

    //закрытие формы
    closeClick: function (button) {
        var win = button.up('window');
        win.close();
    }

}); 

My List View code:

Ext.define('KP.view.personAccount.List', {
    extend: 'Ext.window.Window',
    alias: 'widget.list',

    autoScroll: true,
    modal: false,
    plain: false,
    autoShow: true,
    layout: {
        type: 'fit'
    },

    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {

            items: [
                            {
                                xtype: 'gridpanel',
                                store: 'List',

                                forceFit: true,
                                columns: [
                                            ....
                                       ],

                                dockedItems: [
                                              {
                                                  xtype: 'pagingtoolbar',
                                                  store: 'List',
                                                  dock: 'bottom',                                                     
                                                  displayInfo: true
                                              }

                                            ]
                            }

                    ]
        });



        me.callParent(arguments);
    }

});

Thanks a lot!

Answer 1

What you need to do is disable autoLoad in your store. This way store will be initialized but it will not call your service to get data out. Later you will call store.load() in afterrender handler of your grid.