ExtJS 6.2 - controller keeps looking stores in my cotroller path

Question

I'm new in extJS and i've been working in an app for some time. My problem is that I have an app with an MVC architecture and as I instatiate the controller I declare de stores. But when I run this app in the browser, for some reason the controller is trying to get the store from my controller folder. I have other controllers runing in my app and all of them looks for the store in the stores folder. Does anyone have a clue about this issue? Thanks

Ext.define('SGE.controller.staticData.AbstractController', {
    extend: 'Ext.app.Controller',

    requires: [
        'SGE.util.Util'
    ],

    stores: [
        'Actors',
        'staticData.Categories',
        'staticData.Cities',
        'staticData.Countries',
        'staticData.Languages'
    ],

    views: [
        'staticData.AbstractGrid',
        'staticData.Actors',
        'staticData.Categories',
        'staticData.Cities',
        'staticData.Countries',
        'staticData.Languages'
    ],

    init: function(application) {
        this.control({
            "staticdatagrid": {
                render: this.render,
                edit: this.onEdit
            },
            "staticdatagrid button[itemId=add]": {
                click: this.onButtonClickAdd
            },
            "staticdatagrid button[itemId=save]": {
                click: this.onButtonClickSave
            },
            "staticdatagrid button[itemId=cancel]": {
                click: this.onButtonClickCancel
            },
            "staticdatagrid button[itemId=clearFilter]": {
                click: this.onButtonClickClearFilter
            },
            "staticdatagrid actioncolumn": {
                itemclick: this.handleActionColumn
            },
            "citiesgrid button[itemId=clearGrouping]": {
                toggle: this.onButtonToggleClearGrouping
            }
        });

        this.listen({
            store: {
                '#staticDataAbstract': {
                    write: this.onStoreSync
                }
            }
        });

        if (!Ext.getStore('countries')) {
            Ext.create('SGE.store.staticData.Countries');
        }

        if (!Ext.getStore('languages')) {
            Ext.create('SGE.store.staticData.Languages').load();
        }

        if (!Ext.getStore('actors')) {
            Ext.create('SGE.store.staticData.Actors');
        }

        if (!Ext.getStore('categories')) {
            Ext.create('SGE.store.staticData.Categories');
        }
    },

    onStoreSync: function(store, operation, options){
        Packt.util.Alert.msg('Success!', 'Your changes have been saved.');
        console.log(store);
        console.log(operation);
        console.log(options);
    },

    render: function(component, options) {
        component.getStore().load();  

        if (component.xtype === 'citiesgrid' && component.features.length > 0){
            if (component.features[0].ftype === 'grouping'){
                component.down('toolbar#topToolbar').add([
                    {
                        xtype: 'tbseparator'
                    },
                    {
                        xtype: 'button',
                        itemId: 'clearGrouping',
                        text: 'Group by Country: ON',
                        iconCls: 'grouping',
                        enableToggle: true,
                        pressed: true
                    }
                ]);
            }
        }     
    },

    onEdit: function(editor, context, options) {
        context.record.set('last_update', new Date());
    },

    onButtonClickAdd: function (button, e, options) {
        var grid = button.up('staticdatagrid'),
        store = grid.getStore(),
        modelName = store.getProxy().getModel().modelName,
        cellEditing = grid.getPlugin('cellplugin');

        store.insert(0, Ext.create(modelName, {
            last_update: new Date()
        }));

        cellEditing.startEditByPosition({row: 0, column: 1});
    },

    onButtonClickSave: function (button, e, options) {
        button.up('staticdatagrid').getStore().sync();
    },

    onButtonClickCancel: function (button, e, options) {
        button.up('staticdatagrid').getStore().reload();
    },

    onButtonClickClearFilter: function (button, e, options) {
        button.up('staticdatagrid').filters.clearFilters();
    },

    handleActionColumn: function(column, action, view, rowIndex, colIndex, item, e) {
        var store = view.up('staticdatagrid').getStore(),
        rec = store.getAt(rowIndex);

        if (action == 'delete'){
            store.remove(rec);
            Ext.Msg.alert('Delete', 'Save the changes to persist the removed record.');
        }   
    },

    onButtonToggleClearGrouping: function (button, pressed, options) {

        var store = button.up('citiesgrid').getStore();

        if (pressed){
            button.setText('Group by Country: ON');
            store.group('country_id');
        } else {
            button.setText('Group by Country: OFF');
            store.clearGrouping();
        }
    }
});

Browser response

enter image description here

Answer 1

• An ExtJs Controller pulls in the specified store files before rendering its UI. Assuming that you have not created any store files (assumption form your init function where you created the store if they do not exist), it first searches the store files to load them into the memory.
• Another possible problem may be the store has a different namespace than that of the application, you will need to specify the full class name as well as define a path in the Loader's paths config or setPath method.
• Refer doc ExtJs Controller's Stores.