Sorry about that, I didn't send the hole implementation...
You could use the following code :
Code:
Ext.create('Ext.grid.Panel', {
plugins: [ Ext.create('Ext.ux.grid.FilterRow') ],
store: Ext.create('Ext.data.Store', {
pageSize:25,
remoteSort:true,
fields:[
'id',
'siteId',
'firstName',
'lastName',
'company',
'birthday'
],
proxy:{
type:'direct',
directFn:Progik.Remote.Contacts.read,
reader:{
type:'json',
root:'rows',
successProperty:'success',
idProperty:'id',
totalProperty:'total'
}
}
}),
columns:[
{ header:'#', dataIndex:'id', nofilter:{}},
{
header:'siteId',
dataIndex:'siteId',
filter:{
xtype:'combo',
queryMode: 'local',
displayField: 'name',
valueField: 'id',
store:Ext.create('Ext.data.Store', {
fields:['id', 'name'],
data:[{
id:'0', name:'test'
},{
id:'1', name:'test2'
}]
})
}
},
{ header:'firstName', dataIndex:'firstName', flex:1 },
{ header:'lastName', dataIndex:'lastName', flex:1 },
{ header:'company', dataIndex:'company'},
{
header:'birthday',
dataIndex:'birthday',
filter:{
xtype:'datefield',
format:'Y-m-d'
}
}
]
});
I've also modified the FilterRow code so the onChange event work with a delay on combobox.
Code:
Ext.define('Progik.ux.grid.FilterRow', {
extend:'Ext.util.Observable',
init: function(grid) {
this.grid = grid;
this.applyTemplate();
// when Ext grid state restored (untested)
grid.on("staterestore", this.resetFilterRow, this);
// when column width programmatically changed
grid.headerCt.on("columnresize", this.resizeFilterField, this);
grid.headerCt.on("columnmove", this.resetFilterRow, this);
grid.headerCt.on("columnshow", this.resetFilterRow, this);
grid.headerCt.on("columnhide", this.resetFilterRow, this);
grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, this);
},
applyTemplate: function() {
var searchItems = [];
this.eachColumn( function(col) {
var filterDivId = this.getFilterDivId(col.id);
if (!col.filterField) {
if(col.nofilter) {
col.filter = { };
} else if(!col.filter){
col.filter = { };
col.filter.xtype = 'textfield';
}
//console.log(col);
col.filter = Ext.apply({
id:filterDivId,
hidden:col.hidden,
xtype:'component',
cls: "small-editor filter-row-icon",
width:col.width-2,
enableKeyEvents:true,
style:{
margin:'1px 1px 1px 1px'
}
}, col.filter);
col.filterField = Ext.ComponentManager.create(col.filter);
} else {
if(col.hidden != col.filterField.hidden) {
col.filterField.setVisible(!col.hidden);
}
}
if(col.filterField.xtype == 'combo' || col.filterField.xtype == 'datefield') {
col.filterField.on("change", this.onChange, this);
} else {
col.filterField.on("keypress", this.onKeyPress, this);
}
searchItems.push(col.filterField);
});
if(searchItems.length > 0) {
this.grid.addDocked(this.dockedFilter = Ext.create('Ext.container.Container', {
id:this.grid.id+'docked-filter',
weight: 100,
dock: 'top',
border: false,
baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
items:searchItems,
layout:{
type: 'hbox'
}
}));
}
},
// Removes filter fields from grid header and recreates
// template. The latter is needed in case columns have been
// reordered.
resetFilterRow: function() {
this.grid.removeDocked(this.grid.id+'docked-filter', true);
delete this.dockedFilter;
this.applyTemplate();
},
onChange: function() {
if(!this.onChangeTask) {
this.onChangeTask = new Ext.util.DelayedTask(function(){
this.storeSearch();
}, this);
}
this.onChangeTask.delay(1000);
},
onKeyPress: function(field, e) {
if(e.getKey() == e.ENTER) {
this.storeSearch();
}
},
getSearchValues: function() {
var values = {};
this.eachColumn( function(col) {
if(col.filterField.xtype != 'component') {
values[col.dataIndex] = col.filterField.getValue();
}
});
return values;
},
storeSearch: function() {
if(!this.grid.store.proxy.extraParams) {
this.grid.store.proxy.extraParams = {};
}
this.grid.store.proxy.extraParams.search = this.getSearchValues();
this.grid.store.load();
},
// Resizes filter field according to the width of column
resizeFilterField: function(headerCt, column, newColumnWidth) {
var editor = column.filterField;
editor.setWidth(newColumnWidth - 2);
},
scrollFilterField:function(e, target) {
var width = this.grid.headerCt.el.dom.firstChild.style.width;
this.dockedFilter.el.dom.firstChild.style.width = width;
this.dockedFilter.el.dom.scrollLeft = target.scrollLeft;
},
// Returns HTML ID of element containing filter div
getFilterDivId: function(columnId) {
return this.grid.id + '-filter-' + columnId;
},
// Iterates over each column that has filter
eachFilterColumn: function(func) {
this.eachColumn( function(col, i) {
if (col.filterField) {
func.call(this, col, i);
}
});
},
// Iterates over each column in column config array
eachColumn: function(func) {
Ext.each(this.grid.columns, func, this);
}
});