PDA

View Full Version : AZ Filter for Grid



steffenk
3 Apr 2010, 4:21 PM
Hi,

this simple plugin adds a toolbar to a GridPanel which filters records by A-Z and #, which are all chars with ASCII < 65 (eg numbers).

http://dev.sk-typo3.de/ext/azfilter.png

Source and Demo is here (http://dev.sk-typo3.de/ext/azfilter.html)

It can be extended easy, the base is the grid filters plugin.

usage:

var azfilter = new Ext.ux.plugins.GridAZFilter({
AZfield: 'company',
local: true
});


and you have to add it to plugins:

plugins: [azfilter]

moegal
3 Apr 2010, 6:39 PM
perfect, really useful!

Marty

senacle
17 Dec 2010, 1:41 AM
If you have a lot of datas, it may be useful to load it from server.
I replace the reload function by the load function.



/**
* Ext.ux.plugins.GridAZFilter
*
* @author Steffen Kamper
* @date April 3, 2010
* @update SC - December 17, 2010
*
* @class Ext.ux.plugins.Ext.ux.plugins.GridAZFilter
* @extends Ext.util.Observable
*/
Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.GridAZFilter = function(config) {
Ext.apply(this, config);
};

// plugin code
Ext.extend(Ext.ux.plugins.GridAZFilter, Ext.util.Observable, {
clearText: 'All',
AZfield: null,

init: function(grid) {
this.azFilter = '';
if(grid instanceof Ext.grid.GridPanel) {
this.grid = grid;

this.store = this.grid.getStore();
if(this.local){
this.store.on('load', function(store){
store.filterBy(this.getRecordFilter());
}, this);
}

this.grid.filters = this;
this.grid.addEvents({"azfilterupdate": true});
grid.on("render", this.onRender, this);
}
},

getRecordFilter: function() {
var field = this.AZfield;
var f = this.azFilter;
return function(record){
if (f && field) {
var rChar = record.get(field);
if(f === '#') {
return (rChar.charCodeAt(0) < 65);
}
return (rChar.charAt(0).toUpperCase() === f);
}
return true;
};
},

/** private **/
buttonToggleHandler: function(button, state) {
if (state === true) {
if (button.text === this.clearText) {
this.azFilter = '';
} else {
this.azFilter = button.text.charAt(0);
}
this.grid.fireEvent('azfilterupdate', this, this.azFilter);
this.load();
}
},


/** private **/
addToolbar: function() {
if (this.AZfield) {
var items = [{
text: this.clearText,
pressed: true,
enableToggle: true,
toggleGroup: 'AZfilter',
toggleHandler: this.buttonToggleHandler,
scope: this
},
'-',
{
text: '#',
enableToggle: true,
toggleGroup: 'AZfilter',
toggleHandler: this.buttonToggleHandler,
scope: this
}];
for (var i=65; i<91; i++) {
items.push({
text: String.fromCharCode(i),
enableToggle: true,
toggleGroup: 'AZfilter',
toggleHandler: this.buttonToggleHandler,
scope: this
});
}
var tb = new Ext.Toolbar({
items: items
});

this.grid.elements += ',tbar';
this.grid.add(tb);
this.grid.doLayout();
}
},

/** private **/
load: function(){
if(this.local){
this.grid.store.clearFilter(true);
this.grid.store.filterBy(this.getRecordFilter());
} else {
var store = this.grid.store;
store.removeAll();
store.load({
params:{filter: this.azFilter}
});
}
},

onRender: function(){
this.addToolbar();
}
});


usage


var azfilter = new Ext.ux.plugins.GridAZFilter({
AZfield: 'any_column',
local: false
});

rse_huisman
31 Dec 2010, 8:31 AM
Works like a charm !

But one small change.

else {
var store = this.grid.store;
store.removeAll();
store.load({
params:{filter: this.azFilter}
});
}

Erases the data also in my database due to the usage of a HttpProxy with API calls.

mohan_b
28 Jan 2011, 11:38 PM
Since I have added this plugin, the Horizontal Scrollbar does not appear when columns exceed the available width..

I cant seem to find what is the problem

walldorff
15 Feb 2011, 3:53 AM
Thanks Steffen, this is exactly what I needed.