如何在 ExtJS 中引用控件或控件的存储？

Question

我有一个组合框，我需要在代码中访问商店，以便我可以对其应用过滤器。这是组合的定义。

//ItemGeneralPanel.js
Ext.define('myCompany.view.item.ItemGeneralPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myApp.ItemGeneralPanel',

    layout: 'vbox',
    bodyPadding: 4,
    defaults: { width: 800 },

    items: [
                {
                    xtype: 'combobox',
                    fieldLabel: 'Replenishment Source',
                    displayField: 'name',
                    valueField: 'id',
                    queryMode: 'local',
                    forceSelection: true,
                    bind: { value: '{item.sourceId}', store: '{replenishmentSourceList}' }
                }, 
    ]
});

我的 ItemController 里面有这个：

//ItemController.js
    stores: [
        'item.ItemList',
        'item.ReplenishmentSourceList'
    ],

我的商店是这样的：

//ReplenishmentSourceList.js
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
    extend: 'Ext.data.Store',
    model: 'myCompany.model.Source',
    sorters: 'name'
});

并且模型只有一个字段列表（Source.js）：

如何在控制器中引用此组合框，以便获取对其存储的引用，然后对返回的结果应用过滤器。像这样的：

//ItemEditViewController.js
myFunction: function (facilId)  {

        this.lookup('replenishmentSourceList').getStore().load({
            scope: this,
            callback: function (records, operation, success) {
                if (!success) {
                    Ext.log({ level: 'error', msg: 'Error loading facility list', dump: operation });
                    var text = (operation.getError() ? operation.getError().response.responseText : operation.getResponse().responseText);
                    var msg = Ext.decode(text).message;
                    Ext.Msg.show({ title: 'Error', msg: 'Error loading Source data.<br>' + msg, buttons: Ext.Msg.OK, icon: Ext.Msg.ERROR });
                }
                else {

                    this.lookup('replenishmentSourceList').getStore().setFilters({
                        property: 'facilityId',
                        operator: '==',
                        value: 'facilId'


                    });

这不起作用，所以我想如果我能得到组合框，我可以做类似的事情： myRefToComboBox.getStore()....

有什么想法吗？

Answer 1

如果您想直接获取商店，那么您可以简单地使用storeId 并在创建的商店Ext.data.StoreManager.lookup('myStore') 上执行查找，这将返回商店实例。参考docsExt.data.StoreManager。

以下是您可以在小提琴中试用的示例（检查控制台，因为它使用商店管理器打印商店实例）：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('myCompany.store.item.ReplenishmentSourceList', {
            alias: 'store.replenishmentSourceList',
            extend: 'Ext.data.Store',
            sorters: 'name'
        });

        Ext.define('myCompany.view.item.ItemGeneralPanel', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.myApp.ItemGeneralPanel',

            layout: 'vbox',
            bodyPadding: 4,
            defaults: {
                width: 800
            },

            items: [{
                xtype: 'combobox',
                fieldLabel: 'Replenishment Source',
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
                forceSelection: true,
                store: {
                    type: 'replenishmentSourceList',
                    storeId: 'myStore'
                }
            }, ]
        });

        Ext.create({
            xtype: 'myApp.ItemGeneralPanel',
            renderTo: Ext.getBody()
        });
        
        console.log(Ext.data.StoreManager.lookup('myStore'));

    }
});

编辑 以上是获取store的一种方式，另一种方式是使用getView()从控制器获取combobox或panel视图，然后获取store。

以下是带有控制器的代码（检查控制台）：

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('MyApp.UserController', {
            alias: 'controller.user',
            extend: 'Ext.app.ViewController',
            myFunction: function (facilId) {
                console.log(this.getView())
                console.log(this.getView().down('#replenishmentCombo').getStore());
            }
        });

        Ext.define('myCompany.store.item.ReplenishmentSourceList', {
            alias: 'store.replenishmentSourceList',
            extend: 'Ext.data.Store',
            sorters: 'name'
        });

        Ext.define('myCompany.view.item.ItemGeneralPanel', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.myApp.ItemGeneralPanel',
            controller: 'user',
            layout: 'vbox',
            bodyPadding: 4,
            defaults: {
                width: 800
            },
            listeners: {
                boxready: 'myFunction'
            },

            items: [{
                xtype: 'combobox',
                itemId: 'replenishmentCombo',
                fieldLabel: 'Replenishment Source',
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
                forceSelection: true,
                store: {
                    type: 'replenishmentSourceList',
                    storeId: 'myStore'
                }
            }, ]
        });

        Ext.create({
            xtype: 'myApp.ItemGeneralPanel',
            renderTo: Ext.getBody()
        });

        // console.log(Ext.data.StoreManager.lookup('myStore'));

    }
});