javascriptextjsextjs4sencha-touchsencha-architect

How to set dynamic value on extraParams store extjs


hi i have a problem to store dynamic value to extraParams on extjs..

my case is i can get value from my component when im console it on here:

listeners: {
    load: function (store, records, success) {
        console.log(Ext.ComponentQuery.query('combobox[reference=terminal2]')[0])
    }
}

i got the value from that component, but when i try to pass it to extraParam i got error undefined..

proxy: {
    type: 'ajax',
    url: Config.getApi() + 'api/public/index',
    extraParams: {
        dParams: Ext.ComponentQuery.query('combobox[reference=terminal2]')[0]
    },
},

i got error undefined..

my full store code

Ext.define('Admin.store.npk.mdm.LayananAlat', {
    extend: 'Ext.data.Store',

    alias: 'store.layananalat',

    requires: [
        'Config'
    ],

    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: Config.getApi() + 'api/public/index',
        actionMethods: {
            read: 'POST'
        },
        paramsAsJson: true,
        timeout: 120000,
        extraParams: {
            dParams: Ext.ComponentQuery.query('combobox[reference=terminal2]')[0]
        },
        headers: {
            'token': Ext.util.Cookies.get('Tokens')
        },
        reader: {
            type: 'json',
            rootProperty: function (obj) {
                return obj.result
            },
            totalProperty: function (obj) {
                return obj.count
            }
        }
    },
    listeners: {
        load: function (store, records, success) {
            console.log(Ext.ComponentQuery.query('combobox[reference=terminal2]')[0])
        }
    }
});

or is there another way to passing dynamic value to extraParams on proxy store in extjs?


Solution

  • Your proxy settings will be set at construction stage when most likely your UI is not build so your component query can not return the referenced UI element.

    Turn off autoLoad and remove the proxy part from the store definition. Then set the proxy somewhere you can be sure the UI is already constructed. E.g. on the view's show/painted event you can add a code like

       const store = Ext.getStore('layananalat');
       store.setProxy({
            type: 'ajax',
            url: Config.getApi() + 'api/public/index',
            actionMethods: {
                read: 'POST'
            },
            paramsAsJson: true,
            timeout: 120000,
            extraParams: {
                dParams: Ext.ComponentQuery.query('combobox[reference=terminal2]')[0]
            },
            headers: {
                'token': Ext.util.Cookies.get('Tokens')
            },
            reader: {
                type: 'json',
                rootProperty: function (obj) {
                    return obj.result
                },
                totalProperty: function (obj) {
                    return obj.count
                }
       });
       store.load();