ExtJS--changing proxy URL then loading store does not update grid

Question

I have a grid with a store which is loaded when app is launched. I have a form also to which the grid is bound to. Initially, the grid shows all records. The search form allows user to filter records. The initial load and search URLs are different. When search is clicked, I dynamically change the URL configured on the store proxy to the filter URL, pass in the form values as extraParams, and load the store. I see the request is made and a response is returned. However, my grid records dont refresh.

//grid store inside initComponent

this.store = Ext.create("Ext.data.Store",{
      fields:["rptid", "text", "value", "date_created", "created_by", "active],
      autoLoad:true,
      proxy:{
        type:"ajax",
        url:"./getRpts.html",
        reader:{
          type:"json",
          root:"data"
        }
      }
    });

//handler for search form button

this.getRPTGrid().getStore().getProxy().url = "./getFilteredReports.html";
    this.getRPTGrid().getStore().getProxy().extraParams = 
      this.getSearchForm().getValues();
    this.getRPTGrid().getStore().load();

thats it. I confirm the request is being made to load the store and confirm the response being received in debugger. The JSON response also contains the "data" root so thats not the issue and the fields dont change either. I have done this 10,000 times before but have never experienced this. Anyone have any ideas?

I even compared the Request and Response Headers from both requests and their exactly the same minus the url and params..

Very odd, I would expect that to work too. In a load handler for your store trying updating the grid view. So this.getRPTGrid().getView().refresh() see if this forces the rows to render. — mindparse
One more thing, in a load handler on your store, stick a breakpoint in and inspect your store and its records, do the new ones show up after the new url with params is called? — mindparse
I had already tried getView().refresh() but no luck. I added a breakpoint after load and saw the first time search is clicked, new records dont show. However, the second time i click search, it does show the new records under store.data.items... but again the grid doesnt refresh. — error123456789
If you follow MVC pattern of extjs. You need to change it dynamically from model. As I proposed to you in my answer. Read this documentation, why you need model to solve your problem. This's about data binding that you want to show to the view. Using model you can dynamically provide data model for your need. And the store takes care of fetching and saving the data from conjuction with the model. — Eko Junaidi Salam
so instead of creating a store inside initComponent i created a separate store class under the store folder. then inside initComp I did this.store = "MyGridStore" and it worked.... why? I have absolutely no idea. — error123456789

Eko Junaidi Salam Eko Junaidi Salam · Accepted Answer · 2015-02-18T00:41:02

Try using reload to ensure your store data. This code below check my data after add or update, so if i add record it's automatically reload my store and select the new record.

var store = this.getRPTGrid().getStore();
Ext.Ajax.request({
    method: 'POST',
    url: "./getFilteredReports.html",
    params: {
        data: this.getSearchForm().getValues()
    },
    success: function(response) {
        store.reload({
            callback: function() {
                var newRecordIndex = store.findBy(
                    function(record, id) {
                        if (record.get(
                            'rptid'
                        ) === values.rptid) {
                            return true;
                        }
                        return false;
                    });
                getRPTGrid.getSelectionModel().select(
                    newRecordIndex);
            }
        });
    }
});

and if you want to change proxy url to update your store try to update the proxy in your model instead in your store, like this below :

Ext.define('APP.model.m_gis', {
    extend: 'Ext.data.Model',
    alias: 'widget.gisModel',
    proxy: {
        type: 'jsonp',
        url: './getRpts.html',
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'totalCount'
        }
    },
    fields: ["rptid", "text", "value", "date_created", "created_by",
        "active"
    ]
});

This is the store look like :

Ext.define('APP.store.s_gis', {
    extend: 'Ext.data.Store',
    alias: 'widget.gisStore',
    model: 'APP.model.m_gis'
});

and change your proxy like you want :

var place_store = Ext.create('APP.store.s_gis');

place_store.getProxy().setExtraParam('url', "./getFilteredReports.html");

ExtJS--changing proxy URL then loading store does not update grid

1 Answers