Store not reloading in ExtJs

Question

I am working on a display where I need to bind a combobox but its not reloading with latest data. There is only one call to database and after that its using existing store from cache. How to make it reload from database every-time(or at least every-time when we reopen the display). Below is the code.

//store
Ext.define('NetworkStore', {
    extend: 'Ext.data.Store',
    alias: 'NetworkStore',
    fields: ['Id', 'value'],
    storeId: 'NetworkStore', 
    autoLoad: true,
    proxy: {
        type: 'ajax',
        useDefaultXhrHeader: false,
        actionMethods: { create: "POST", read: "GET", update: "POST", destroy: "POST" },
        headers: { 'Content-Type': 'application/x-www-form-urlencode' },
        limitParam: false,
        startParam: false,
        pageParam: false,
        extraParams: {
            Style: 1
        },
        url: 'url',
        reader: {
            type: 'json'
        }
    }
});

xtype: 'combo',
name: 'NetworkIDList',
store: Ext.create('NetworkStore').load({
                    params: {
                        Style: 3
                    }
                }),

Answer 1

If we pass store as given below it will always get store from db not from cache.

  store: {
            type: 'NetworkStore',
            proxy: {
                    extraParams: {
                        Style: 3
                    }
                }
            }

Answer 2

Add the desired logic to the list expand event handler.

Fiddle

            xtype: 'combo',
            name: 'NetworkIDList',
            listeners: {
                expand: function () {
                    this.getStore().load()
                }
            },
            store: Ext.create('NetworkStore').load({
                params: {
                    Style: 3
                }
            })

Answer 3

The offical docs in lastQuery offer:

    listeners: {
        beforequery: function (qe) {
            delete qe.combo.lastQuery;
        }
    }

here is the full soure:

/**
 * @property {String} lastQuery
 * The value of the match string used to filter the store. Delete this property to force
 * a requery. Example use:
 *
 *     var combo = new Ext.form.field.ComboBox({
 *         ...
 *         queryMode: 'remote',
 *         listeners: {
 *             // delete the previous query in the beforequery event or set
 *             // combo.lastQuery = null (this will reload the store the next time it expands)
 *             beforequery: function(qe){
 *                 delete qe.combo.lastQuery;
 *             }
 *         }
 *     });
 *
 * To make sure the filter in the store is not cleared the first time the ComboBox trigger
 * is used configure the combo with `lastQuery=''`. Example use:
 *
 *     var combo = new Ext.form.field.ComboBox({
 *         ...
 *         queryMode: 'local',
 *         triggerAction: 'all',
 *         lastQuery: ''
 *     });
 */

Answer 4

remoteFilter: true

true if want to load datas from the server side on each expand of combobox, false if you want to load data locally after once it is loaded.

if remoteFilter property is not set in the store it defaults to false. soo setting this property to true might solve the issue

Answer 5

First, you need to convert your desire to a systematic logic.

"at least every-time when we reopen the display"

Like the following logic:

1. Listen to the widget's event, which means to "when we reopen the display"
2. Reload the widget's store

    {
       xtype: 'combo',
       name: 'NetworkIDList',
       store: Ext.create('NetworkStore').load({
                    params: {
                        Style: 3
                    }
                }),
      //Add this:
       afterRender: function(){
            //Just do this to load the store
            this.getStore().load();
       }
     }

afterRender is one of sample listeners which can be declared as a method. There are many other event listeners you can use to place your code to load the widget's store again and again as you want.

see https://docs.sencha.com/extjs/7.0.0/modern/Ext.Widget.html#method-afterRender

and .load() is the ProxyStore's method which can be used to first load manually or reload the store.

see https://docs.sencha.com/extjs/7.0.0/modern/Ext.data.ProxyStore.html#method-load

Hope it help.