0

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

4

1 回答 1

0
  • ExtJs 控制器在呈现其 UI 之前拉入指定的存储文件。假设您没有创建任何存储文件（假设您的init函数在其中创建了存储，如果它们不存在），它首先搜索存储文件以将它们加载到内存中。
  • 另一个可能的问题可能是商店的命名空间与应用程序的命名空间不同，您需要指定完整的类名以及在加载器的路径配置或setPath方法中定义路径。
  • 请参阅文档ExtJs Controller's Stores。
于 2018-12-05T09:36:52.157 回答