CODEWITHSUNDEEP
javascriptextjscomboboxstore
DropMania
DropMania

Reputation: 133

Is it possible to get a combox reference from a store? ExtJS 6

Following scenario:

                          {
                                xtype: 'combo',
                                displayField: 'LANGTEXT',
                                valueField: 'KURZTEXT',
                                store: {
                                    remoteSort: false,
                                    autoLoad: false,
                                    pageSize: 999999,
                                    fields: [
                                        { name: 'KURZTEXT', type: 'string' },
                                        { name: 'LANGTEXT', type: 'string' }
                                    ],
                                    proxy: {
                                        type: 'ajax',
                                        url: 'callHandler.cfc',
                                        actionMethods: { read: 'POST' },
                                        reader: {
                                            type: 'json',
                                            rootProperty: 'DATA.ROWS',
                                            totalProperty: 'TOTALCOUNT'
                                        }
                                        
                                    },
                                    listeners: {
                                        load: function(store, records, successful, operation, eOpts ){
                                            //is something like this possible?
                                            var combo = store.getCombo()
                                            
                                        }
                                    }
                                }                      
                            }

Is it possible to get the combobox reference from the store with something like this: store.getCombo()? I know that normally you can only get the store reference from the combobox. But I thought maybe it works also the other way around, if the store is created in the combobox?

Upvotes: 1

Views: 127

Answers (2)

leonard.javiniar
leonard.javiniar

Reputation: 555

You may want to check the combobox afterQuery template method.

It's a configuration available for the combobox component that works almost similar to the store's load event. Here you have access to both the combobox component and the store.

I think the drawback is: it only gets called when the combo trigger is clicked or a value is typed in the combo's textfield. I believe this would already be help if you want to do your post-processing after these events.

{
    xtype: 'combo',
    displayField: 'LANGTEXT',
    valueField: 'KURZTEXT',
    store: {
        remoteSort: false,
        autoLoad: false,
        pageSize: 999999,
        fields: [
            { name: 'KURZTEXT', type: 'string' },
            { name: 'LANGTEXT', type: 'string' }
        ],
        proxy: {
            type: 'ajax',
            url: 'callHandler.cfc',
            actionMethods: { read: 'POST' },
            reader: {
                type: 'json',
                rootProperty: 'DATA.ROWS',
                totalProperty: 'TOTALCOUNT'
            }
            
        }
    },

    afterQuery: function (queryPlan) {
        var combo = queryPlan.combo; // I guess `var combo = this;`  should work too..
        var store = combo.getStore();


        // always return queryPlan
        return queryPlan;
    }
}

Let me know if you have any issue or questions.

Upvotes: 1

DerKorb
DerKorb

Reputation: 702

The only solution I could think of was to write a custom matcher function.

You could do this by overriding the Ext.Component and adding the matcher function like this:

    Ext.override(Ext.Component, {
        hasStoreId: function (storeId) {
            if (Ext.isFunction(this.getStore) && this.getStore().storeId) {
                return this.getStore().storeId === storeId;
            }
            return false;
        }
    });

Now that you have a matcher function for every component you can search for all components with given storeId like this:

Ext.ComponentQuery.query("{hasStoreId('mystore')}");

You can also be more precise and only search for combos that match the criteria like this:

Ext.ComponentQuery.query("combo{hasStoreId('mystore')}");

Now that you have all combos with the given storeId you should easily be able to retrieve the combo you need.

Here a Sencha fiddle with a working example: example code

Upvotes: 1

Related Questions