View Full Version : Applying custom filter to ExtJS grid

16 Jan 2013, 12:12 AM

I have used ExtJS grid over the Dashboard page which has pagination enabled. I'm giving ajax call to MVC controller to get data into store and bind the grid.

I have to provide custom filter to load the data into the grid so I have shown DatePicker control. My controller has following arguments-

public JsonResult GetCIRTs(DateTime createdDate, int start, int limit, int page, string sort)


//create store for CIRT to load CIRT data
var store = Ext.create('Ext.data.Store', {
model: 'CIRT',
storeId: 'CIRTStore',
pageSize: 25,
autoLoad: false,
remoteSort: true,
proxy: {
type: 'ajax',
url: 'Home/GetCIRTs?createdDate=' + createdDate,
headers: {
'Content-type': 'application/json'
reader: {
type: 'json',
root: 'CIRTDetails',
totalProperty: 'TotalRecords'

I can see default date value in the controller method every time which is passed initially somehow NOT sure how should I reload store with new date value from the custom filter datepicker.

It looks like; I will need to create parameters to store and reload it with new value. Please suggest me right approach as I'm NOT getting new date value in the controller method.

Regards, Pravin

17 Jan 2013, 1:44 PM
I would use the extraParams object on the proxy instead of putting it directly on the url.

17 Jan 2013, 4:11 PM
I add my filters to a form panel completely separate from the grid and then attach the forms values to the grid as filters.

When I do this and force the store to load, it submits the filters with the ajax call to get the data. The parameter is "filter" and it looks like this: [{"property":"from_date","value":"01/09/2013"},{"property":"to_date","value":"01/16/2013"},{"property":"manager","value":"-1"},{"property":"account_status","value":"1"}]

Important Notes:

I use itemId's on the fields because it allows me to send them as the filter id's to the store. This is so it overrides the filter currently on the store instead of trying to add a new one.
You'll also need to replace the id's I use for Ext.getCmp to get the store and the form
The form automatically submits when a select event on a field is fired.
Add remoteFilter:true to your grid's store
All the commented code in the submit form section was me trying a few different things in the different ExtJS versions. If my example doesn't work, look into those commented functions and see if they can help :D

// Create the form
// I spawn this later- so you can display it however you choose
report_filter_form = Ext.create('Ext.form.Panel', {
id: 'report_filter_form',
region: 'center',
autoScroll: true,
border: false,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'under',
autoFitErrors: true,
anchor: '100%'
defaults: {
margin: 10,
labelWidth: 'auto',
listeners: {
// When the user changes the fields value, submit the form
select: function () {
submitForm: function () {
var store = Ext.getCmp('report_grid').getStore(),
filters = new Array,
form = this.getForm();
if (form.isValid()) {
// Clear the filter collection without updating the UI
// loop though each field of the form
form.getFields().each(function (n) {
if (n.getSubmitData() != null) {
// Add filters to the store
id: n.itemId,
property: n.itemId,
value: n.getSubmitData()[n.itemId]
//filters.push({property: n.itemId, value: n.getSubmitData()[n.itemId]});
// Add form filters to the store
//store.filters = filters;
// Force the store to load
// Not nessesarry, but adding an option in the button bar to reset the form
bbar: [{
xtype: 'button',
id: 'reset_filters',
text: 'Reset Filters',
listeners: {
click: function () {
// If the reset filter button is pressed, reset all the fields in the form and resubmit the form
var form = Ext.getCmp('report_filter_form');
var changed = false;
form.getForm().getFields().each(function (n) {
if (n.value.toString() != n.defaultValue.toString()) {
changed = true;
if (changed) {

"value": new Date(Date.parse('Wed, 09 Jan 2013 00:00:00')),
"defaultValue": new Date(Date.parse('Wed, 09 Jan 2013 00:00:00')),
"name": "from_date",
"itemId": "from_date",
"fieldLabel": "From Date",
"xtype": "datefield",
"endDateField": "to_date"
}, {
"value": new Date(Date.parse('Wed, 16 Jan 2013 00:00:00')),
"defaultValue": new Date(Date.parse('Wed, 16 Jan 2013 00:00:00')),
"name": "to_date",
"itemId": "to_date",
"fieldLabel": "To Date",
"xtype": "datefield",
"startDateField": "from_date"