Print Shortlink

extraParams in Ext JS 4

A Store instance in Ext JS4 uses a Proxy object to connect to the server. If you want to pass parameters to the proxy dynamically you can make use of the extraParams property. Let’s discuss a simple example to see the use of extraParams property.
Let’s say you have two list boxes ‘country’ and ‘city’. Based on the value selected from the country list box, the city list box has to be populated. The city list will be loaded from the server, through a cityStore that we have configured. When the country value changes you will pass the country as a parameter to the cityStore and load the cities in the listbox.
The code for the cityStore is given below.

var cityStore = Ext.create(“Ext.data.Store”,{
fields : [“name”],
autoLoad : false,
proxy : {
type : “ajax”,
url : “citiesServlet”,
reader : {  type : “json”}
}
}});
The cityStore is populated by sending a request to a ‘citiesServlet’. The city combo box can be mapped to the cityStore. The country and city combo boxes are declared as shown below.

                                           {
           xtype : “combo”,
        displayField : “name”,
        fieldLabel : “Country”,
        store : {
        fields : [“name”],
        data : [
                {name:”India”},{name:”UK”},{name:”USA”}
              ]
        },
          listeners : {
        change : function(source,newValue,oldValue){
        cityStore.proxy.extraParams = {“country” : newValue};
        cityStore.load();
        },
        }
        },
        {
        xtype : “combo”,
        store : cityStore,
        displayField : “name”,
        fieldLabel : “City”
        }

 You can notice that in the change event listener of the country combo box , the selected value  is passed as a parameter to the cityStore’s proxy object using the extraParams property and load method is invoked. Since the cityStore is mapped to the city combo box, the combo box gets automatically populated with the data fetched from the server.

Leave a Reply