persisting filters in grid panel

Question

Hi

I would like to persist filters applied on gridpanel on page refresh. Can you please guide me in doing this.

Thanks.

Answer 1

Turn on the Ext JS state manager globally (where you set Ext.BLANK_IMAGE_URL).

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

User changes to some components will now be stored in a cookie, which will persist across requests. If you need to store additional custom data, you can do that using Ext.state.Manager.set and Ext.state.Manager.get. State is configurable on individual components.

Saki has a good example.

Answer 2

Here is the code which send the filter data to webservice

Ext.extend(Ext.ux.AspWebServiceProxy, Ext.data.DataProxy,

{

load: function(params, reader, callback, scope, arg) {

var userContext = { callback: callback,

reader: reader, arg: arg, scope: scope };

           var proxyWrapper = this;

           //debugger;
           //Handles the response we get back from the web service call
           var webServiceCallback = function(response, context, methodName) {
               proxyWrapper.loadResponse(response, userContext, methodName);
           }

           var serviceParams = [];
           var filters = {};
           //Convert the params into an array of values so that they can be used in the call (note assumes that the properties on the object are in the correct order)
           for (var property in params) {
               if (property.indexOf("filter[") == 0) {
                   filters[property] = params[property];
               }
               else {
                   serviceParams.push(params[property]);
               }
               //console.log("Property: ", property, "Value: ", params[property]);
           }
           serviceParams.push(filters);

           //Add the webservice callback handlers
           serviceParams.push(webServiceCallback);
           serviceParams.push(this.handleErrorResponse);

           //Make the actual ASP.Net web service call
           this.webServiceProxyMethod.apply(this.webServiceProxy, serviceParams);
       },

       handleErrorResponse: function(response, userContext, methodName) {
           window.location.reload();
           //                               Ext.MessageBox.show({
           //                                       title: 'Error',
           //                                       msg: response.get_message(),
           //                                       buttons: Ext.MessageBox.OK,
           //                                       icon: Ext.MessageBox.ERROR
           //                                   });
           //alert("Error while calling method: " + methodName + "n" + response.get_message());
       },

       loadResponse: function(response, userContext, methodName) {
           var result = userContext.reader.readRecords(response);
           userContext.callback.call(userContext.scope, result, userContext.arg, true);
       }

   });