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

Question

I have a combo box that I need to get access to the store in code so that I can apply a filter to it. Here is the definition of the combo.

//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}' }
                }, 
    ]
});

My ItemController has this in it:

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

And my store looks like this:

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

And the model just has a list of fields(Source.js):

How do I reference this combo box in my controller so that I can get a reference to its store and then apply a filter to the results coming back. Something like this:

//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'


                    });

This isn't working, so I figured if I could get the combobox, I could do something like: myRefToComboBox.getStore()....

Any ideas?

Answer 1

If you want to get the store directly then you can simply use storeId and perform a lookup on created stores Ext.data.StoreManager.lookup('myStore') which will return the store instance. Refer docs for Ext.data.StoreManager .

Below is a sample which you can try out in fiddle (Check console as it prints the store instance using store manager):

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'));

    }
});