View Full Version : Grid filters

15 Oct 2012, 7:14 AM
I am using Ext.grid.EditorGridPanel(EXTJS 3.4) I want to filter the data/record in the grid.
Store of grid having events like add, update, remove, load, datachanged etc. are attached for the calculation of the row data like price, discount… etc.

I used Ext.ux.grid.GridFilters (local filter) to apply filters in the grid but it applies filter on the store and store fires above events. So after filter it show the Calculation data depends on the filtered data its true but I want Calculation Data on all records of the grid and not on the filter data.
So I want to hide row after filter like we set display property of row to ‘none’ like below example
grid.getView().getRow(rowIndex).style.display = 'none';
Is there any plug-in for this or another way to use the Ext.ux.grid.GridFilters so I can work around this ?
Suggestions are welcome, Thanks in advance.

16 Oct 2012, 7:05 AM
Moved to help .. Plugins forum is for release notifications.


23 Oct 2012, 1:24 AM
Thanks Scott

23 Oct 2012, 11:59 PM
what about using in tbar a textfield.

This textfield has a listener which filter "on" the store by the method filterBy and gives you the filtered records on the dom.

Does this work ?
Or this ? -> http://www.sk-typo3.de/index.php?id=345

How to apply filter methods on the grid:

Have fun :)

5 Oct 2013, 7:18 AM

I am new to extjs. I am having my grid in center region of panel. And also i need to provide filters in north region. Based on the filters grid data should display(i.e.)month wise and year wise. Till now i placed my grid into center panel. I need to place the filter components in north region. Please help for this in MVC structure.

Please help me:s:s...

7 Oct 2013, 3:23 AM
What exactly are you needing assistance with?

Is it a problem in getting your grid in center, and filters in north - or actually getting your filters to work?

8 Oct 2013, 7:09 PM
Thank u for your reply....
Now I can able to show grid in center region based on db data... Now need help in filters.....

11 Oct 2013, 9:07 PM
I can display data from db....but my requirement is I have to pass some parameters using Ajax request....
Based on the values of parameters queries should execute and servlet should return a json object.... Now I can return
Json object to script file....but can't able to display it.... Here I retrieving data after a button click.....pls help me....

Thanks in advance....

11 Oct 2013, 11:58 PM
Ok, now I understand - and it appears this has nothing to do with actual "store filters" at all :D

So all you really need to do is submit a form to a URL via AJAX, then display the server response (JSON) in a grid? Correct?

12 Oct 2013, 1:24 AM
Ya.... Now I can able to pass Ajax request...and also can retrieving json from servlet... But I don't know that how to get the json in is...??

Thank u so much for replying...

12 Oct 2013, 1:27 AM
Sorry for spell mistake.... I don't knw to use that json data in js file

12 Oct 2013, 2:41 AM
To update the records in your grid, you will need to receive the response from the server, convert this into a JSON object, then load this into the store which your grid is using.

For example:

var myForm = {
xtype: 'formpanel',
defaultType: 'textfield',
items: [
{name: 'field1', fieldLabel: 'field1'},
{name: 'field2', fieldLabel: 'field2'}
buttons: [{
handler: function() {
// Check form values are valid
if(myForm.getForm().isValid()) {
// Submit form
url: 'yourURL.aspx',
success: function(form, action) {
console.log('Success', form, action)
// convert responseText into a JSON object
var json = Ext.decode(action.response.responseText)
// load the JSON object into your store
failure: function(form, action) {
console.log('Failure', form, action)
alert('Something went wrong')


12 Oct 2013, 10:05 AM
Thank u so much....thanks a lot... Can u give me the definition for grid for this scenario....

12 Oct 2013, 10:31 AM
I will post my code on Monday....pls guide me to complete my work....

13 Oct 2013, 9:44 PM

This is my js code. i can get response from servlet. pls help me to display the json data in js file....

this.data={};Ext.define('User', {extend: 'Ext.data.Model',fields: [{name: 'synd_id',type: 'int'
}, {name: 'account_number',type: 'string'
}, {name: 'trans_id',type: 'int'
}, {name: 'trans_type',type: 'string'
}, {name: 'shares',type: 'string'
}, {name: 'trans_desc',type: 'string'
}, {name: 'opening_income_balance',type: 'int'
}, {name: 'opening_principle_balance',type: 'int'
//The data store containing the list of states
var Grid1Store = Ext.create('Ext.data.JsonStore', {id:'Grid1Store',

model: 'User',autoLoad: true,data:data//fields:[ 'synd_id','account_number','trans_id', 'trans_type','shares','trans_desc','opening_income_balance', 'opening_principle_balance'] // proxy: {//type: 'ajax',//url:'LLDTransactionReportServlet', ////url: 'example.json',//reader: {//type: 'json',//root: 'json'//}});
?Ext.onReady(function() {Ext.create('Ext.panel.Panel', {width : 1000,height : 600,//title : 'Border Layout',
//layout: 'border',
items : [ {// title: 'North Region',
region : 'north', // center region is required, no width/height specified
xtype : 'panel',layout : 'anchor',height : 100,split : true,margins : '0 5 5 5',items:[{xtype: 'textfield',id:'synd_id',name: 'synd_id',fieldLabel: 'SYND_ID'
},{xtype: 'textfield',id:'account_no',name: 'account_no',fieldLabel: 'ACC_NO'
},{xtype: 'button',text: 'Search',handler: function(button,event){//Grid1Store.clearFilter();
//var me=this;
var searchValue1 = Ext.getCmp("synd_id").getValue(); //value1
// var searchValue2 = Ext.getCmp("account_no").getValue(); //value2
Ext.Ajax.request({url: 'LLDTransactionReportServlet', // you can fix a parameter like this : MyServlet?action=add
method: 'POST',params: {// all your params....
synd_id:searchValue1},success: function (response){data = Ext.decode(response.responseText);Grid1Store.loadData(data);}});?}}]},{//title: 'Center Region',
region : 'center', // center region is required, no width/height specified
xtype : 'panel',layout : 'fit',height : 500,split : true,margins : '5 5 0 0',items : [?new Ext.grid.GridPanel( {store : Ext.StoreMgr.lookup('Grid1Store'),renderTo : Ext.getBody(),//width : 500,
height:500,columns : [ {name:'synd_id',id : 'synd_id',header : "SYND_ID",sortable : true,dataIndex : 'synd_id'
}, {id : 'account_number',header : "ACCOUNT_NUMBER",sortable : true,dataIndex : 'account_number'
}, {id : 'trans_id',header : "TRANS_ID",sortable : true,dataIndex : 'trans_id'
},{id : 'trans_type',header : "TRANS_TYPE",sortable : true,dataIndex : 'trans_type'
}, {id : 'shares',header : "SHARES",sortable : true,dataIndex : 'shares'
}, {id : 'trans_desc',header : "TRANS_DESC",sortable : true,dataIndex : 'trans_desc'
},{id : 'opening_income_balance',header : "OPENING_INCOME_BALANCE",sortable : true,dataIndex : 'opening_income_balance'
}, {id : 'opening_principle_balance',header : "OPENING_PRINCIPLE_BALANCE",sortable : true,dataIndex : 'opening_principle_balance'
} ]}) ]} ],renderTo : Ext.getBody()});});?

json response from servlet is