ExtJs Erweiterter List Filter
24. März 2009In dem ExtJS Framework gibt es für die Grids, die praktischen Grid Filter. Diese lassen sich ganz einfach einbauen und das ganze sieht dann zum Beispiel so aus:
Mit dem List Filter lassen sich diese Checkboxen darstellen. Die Werte darin sind aber statisch hinterlegt. Man kann auch einen Store im Filter hinterlegen und dann die Werte serverseitig laden. In meinen Fall sollte ich aber die Werte aus den Daten des Grid automatisch ermitteln.
Dazu habe ich erst mal den Ext.data.Store um einen Methode erweitert, die mir die eindeutigen Wert einer Spalte zurückgibt:
Ext.override(Ext.data.Store, {
getUniqueData:function (index){
this.unique_data = new Array();
this.each(function(record){
var value = record.get(index);
if(this.unique_data.indexOf(value)==-1){
this.unique_data.push(value);
}
},this);
return this.unique_data;
}
});
Dann habe ich mir einen neuen Filter erzeugt, abgeleitet von der Klasse: Ext.ux.grid.filter.ListFilter die nur zwei Optionen benötigt:
- uniqueStore: eine Referenz auf den Store des Grid
- dataIndex: der Spalten Index
Der Filter hängt sich an den load Event des Store vom Grid und erzeugt danach seine eigenen Optionen:
Ext.ux.grid.filter.UniqueListFilter = Ext.extend(Ext.ux.grid.filter.ListFilter, {
init : function(){
this.uniqueStore.addListener('load',function(){
this.options = [];
var values = this.uniqueStore.getUniqueData(this.dataIndex);
Ext.each(values,function(value){
this.options.push([value, value]);
},this);
Ext.ux.grid.filter.UniqueListFilter.superclass.init.call(this);
},
this
);
}
});
Diesen Filter kann einfach in meinen GridFilters instanzieren:
var filters = new Ext.ux.grid.GridFilters(
{
local:true,
filters:[
{type: 'string', dataIndex: 'Account'},
{type: 'numeric', dataIndex: 'BasePrice'},
new Ext.ux.grid.filter.UniqueListFilter({
uniqueStore:ds,
dataIndex: 'BaseCurrency'
}),
]
}
);
Im Grid werden die filter über die plugin Schnittstelle eingebunden:
plugins: [filters,...],
Tags: ExtJs, Javascript