PDA

View Full Version : Local Grid Filtering?



abondili
2 Jul 2013, 6:06 AM
Could someone please clearly explain me how the local filtering can be achieved for a grid like this in here (http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.html).

Please explain me how to load UX classes, requires, loader config, filter config, filters in column headers.

I am new to EXTJS. I have been struggling with this Grid filtering from the past 2 months.

Your help is much appreciated.

Thanks Much!

slemmon
4 Jul 2013, 9:00 AM
The source for that example is not minified so you are able to review the source that goes with the example and see how it's constructed.
http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.js

*note, 4.0.2 is an old framework version. 4.2.1 is the current stable.

If you're working on a project and having trouble you might post your work and what you're getting hung up on specifically in order to get more community participation in helping you though tough spots.

ekojs
8 Aug 2013, 7:16 PM
Somebody, Please Help me....

I don't know how to use datetime filter in grid filtering, but I do know how to config date filter in grid filtering.
I have defined filter type in the column with :

filter: {
type: 'datetime',
dateFormat: 'Y-m-d H:i:s',
date: {
format: 'Y-m-d',
},

time: {
format: 'H:i:s',
increment: 1
}
}

but I don't get any response and no matching records...
I'm very appreciate your help...
Sorry if my English not so good...

slemmon
12 Aug 2013, 10:26 AM
For clarity, can you include a test case that shows what you're doing including a data snippet used in the grid?

ekojs
14 Aug 2013, 4:59 PM
this is my snippet code in ext.grid.panel columns

this.columns = [
{ header: 'NIK', dataIndex: 'NIK', field: NIK_field, width: 200,
filterable: true,
renderer : function(val,metadata,record) {
if (record.data.TJMASUK == record.data.TJKELUAR || record.data.TJKELUAR == null ) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}},
{ header: 'NAMA', dataIndex: 'NAMA', field: NAMA_field, width: 200,
filter: true,
renderer : function(val,metadata,record) {
if (record.data.TJMASUK == record.data.TJKELUAR || record.data.TJKELUAR == null) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}},
{ header: 'TJMASUK', dataIndex: 'TJMASUK', field: TJMASUK_field, width: 200,
//filterable: true,
renderer : function(val,metadata,record) {
if (record.data.TJMASUK == record.data.TJKELUAR || record.data.TJKELUAR == null) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}},
{ header: 'TJKELUAR', dataIndex: 'TJKELUAR', field: {xtype: 'datefield',format: 'Y-m-d H:i:s'}, width: 200,
filter: {
type: 'datetime',
dateFormat: 'Y-m-d H:i:s',
date: {
format: 'Y-m-d',
},

time: {
format: 'H:i:s',
increment: 1
}
},
renderer : function(val,metadata,record) {
if (record.data.TJMASUK == record.data.TJKELUAR || record.data.TJKELUAR == null) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}},
{ header: 'ASALDATA', dataIndex: 'ASALDATA', field: {xtype: 'textfield'}, width: 200,
filter: {
type: 'list',
store: optionsStore,
// specify disabled to disable the filter menu
// disabled: true
},
renderer : function(val,metadata,record) {
if (record.data.TJMASUK == record.data.TJKELUAR || record.data.TJKELUAR == null) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
} }
];
this.plugins = [this.rowEditing];
this.features = [filtersCfg];