Question

i made an app in architect. My store is this

Ext.define('MyApp.store.storeMain', {
extend: 'Ext.data.Store',
requires: [
    'MyApp.model.modelMain'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: false,
        storeId: 'storeMain',
        model: 'MyApp.model.modelMain',
        pageSize: 50,
        proxy: {
            type: 'ajax',
            reader: {
                type: 'json',
                root: 'Main',
                totalProperty: 'Main.totalCount'
            }
        }
    }, cfg)]);
}});

This is my button:

{
                                xtype: 'button',
                                text: 'Submit',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }

and this is the function

onButtonClick: function(button, e, options) {
    storeMain.load({
        url:'test.json'
    })
}
                            },

But it is not loading the store. Instead it is giving this error: storeMain is not defined. I have a viewport.js and other files like the storeMain.js

Answer 1

There is no variable storeMain anywhere. You need to call Ext.getStore('storeMain') to get store reference.