Store data is empty though I have response from server

Question

Here is my model:

    Ext.define('DynTabBar.model.Menu',{
        extend: 'Ext.data.Model',
        config: {

                fields: [{
                            name: 'Title', type: 'string'
                    }, {
                            name: 'Level', type: 'int'
                    }, {
                            name: 'Parent', type: 'string'
                    }]
        }
});

Store:

Ext.define('DynTabBar.store.MenuItems', {
    extend: 'Ext.data.Store',
    xtype: 'menustore',
    config: {
            storeId: 'menuStore',
            model: 'DynTabBar.model.Menu',
            autoLoad: false,

            proxy: {
                    type: 'ajax',
                    id: 'menuproxy',
                    url: 'http://localhost:50567/api/Menu',
                    reader: {
                        type: 'json'
                    } 
            }
    }
});

In controller I have smth like that:

var mainStore = Ext.getStore('menuStore'); 
mainStore.load();

My json respone from server is:

[{"Title":"home","Level":1,"Parent":""},{"Title":"home1","Level":2,"Parent":"home"},{"Title":"home2","Level":2,"Parent":"home"},{"Title":"info","Level":1,"Parent":""},{"Title":"info1","Level":2,"Parent":"info"},{"Title":"info2","Level":2,"Parent":"info"},{"Title":"info3","Level":2,"Parent":"info"}]

But store data is empty. What I'm missing or doing wrong?

Answer 1

I fixed the problem, the problem is that I'm not waiting while store data is loaded and do something while store isn't loaded. I fix that doing what I need in store loaded callback.

mainStore.load(callback);