PDA

View Full Version : Paging Grid Search



JustinH
25 Feb 2007, 7:23 PM
Here's a quick and simple extension for PagingToolbar. It will allow you to add a simple smart search to the Toolbar for a grid. Keep in mind this data is filtered remotely by adding a post variable named "filter".

The code:


Ext.PagingToolbarSearch = function(el, ds, config){
Ext.PagingToolbarSearch.superclass.constructor.call(this, el, ds, config);
};

Ext.extend(Ext.PagingToolbarSearch, Ext.PagingToolbar, {
addField : function(config, param){
this.add('-');
this.add('Search:');

this.searchField = Ext.get(this.addDom(config).el);
this.searchField.on("keydown", this.onFilteringKeydown, this);
this.searchField.on("focus", function(){this.dom.select();});
return this.searchField;
},

onFilteringKeydown : function(e){
var page = this.getPageData();
var k = e.getKey();
if(k == e.RETURN){
this.ds.load({params:{start: 0, limit: this.pageSize, filter: this.searchField.dom.value}});
e.stopEvent();
}
}
});

You will also need to change Ext.PagingToolbar to Ext.PagingToolbarSearch, to add the field:


paging.addField({
tag: "input",
type: "text",
size: "12",
cls: "your css class"
});

Let me know if you need help!
[/code]

willogee
26 Feb 2007, 12:38 AM
I'm new to Ext and just considering some additional features for displaying and using grids - this example looks really useful, thanks.

I'm wondering about filtering and being able to show filter values somewhere relevant to each column i.e. probably best in an additional header row rather than in a toolbar. So far I've only seen in the "ColumnModel" the use of strings and other formatting in headers. The question, therefore, is would it be possible to include any other elements e.g. input or select, in the header or in an additional header row?

Any thoughts greatly appreciated
Many thanks
Will

the7erm
14 Jun 2007, 8:59 PM
To make it sticky between pages, you'll need to change it a little.


Ext.extend(Ext.PagingToolbarSearch, Ext.PagingToolbar, {
addField : function(config, param){
this.add('-');
this.add('Search:');

this.searchField = Ext.get(this.addDom(config).el);
this.searchField.on("keyup", this.onFilteringKeyup, this);
this.searchField.on("focus", function(){this.dom.select();});
return this.searchField;
},

onFilteringKeyup : function(e){
var page = this.getPageData();
var k = e.getKey();
if(k == e.RETURN){
this.ds.baseParams.filter = this.searchField.dom.value;
this.ds.load({params:{start: 0, limit: this.pageSize, filter: this.searchField.dom.value}});
e.stopEvent();
}
}
});

lucazamm
2 Jul 2007, 7:52 AM
Hi the7erm,willogee and JustinH.
my name is Luca from Italy.

I am new to Ext and I try to use your code. It is ok, but when you move next or before with the paging the result does not match the filter specified. You have to override the onClick method like this:


onClick : function(which){
var ds = this.ds;
switch(which){
case "first":
if(this.searchField.dom.value.length>0)
this.ds.load({params:{start: 0, limit: this.pageSize, filter: this.searchField.dom.value}});
else
ds.load({params:{start: 0, limit: this.pageSize}});
break;
case "prev":
if(this.searchField.dom.value.length>0)
this.ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize, filter: this.searchField.dom.value}});
else
ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
break;
case "next":
if(this.searchField.dom.value.length>0)
this.ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize, filter: this.searchField.dom.value }});
else
ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
break;
case "last":
var total = ds.getTotalCount();
var extra = total % this.pageSize;
var lastStart = extra ? (total - extra) : total-this.pageSize;
if(this.searchField.dom.value.length>0)
this.ds.load({params:{start: lastStart, limit: this.pageSize, filter: this.searchField.dom.value}});
else
ds.load({params:{start: lastStart, limit: this.pageSize}});
break;
case "refresh":
if(this.searchField.dom.value.length>0)
this.ds.load({params:{start: this.cursor, limit: this.pageSize, filter: this.searchField.dom.value}});
else
ds.load({params:{start: this.cursor, limit: this.pageSize}});
break;
}

Let me know if you need more information!

trbs
2 Jul 2007, 5:04 PM
no you don't have to.

please look at: http://ido.nl.eu.org/pir/ and the source code for that example.
when you use ds.baseParams you only need to set the parameters once.
and then delete them from baseParams when you no longer need them.

you do not need to override everything that does a ds.load({params:{}}). (you can; but you don't have to :) )

you also do not need to pass information to params if it's already in baseParams.

baseParams is for fixed params, which are passed to the server every time.
params is for dynamic params, which you pass once or with different values each time.

hope this helps.

lucazamm
2 Jul 2007, 11:38 PM
I understand what you mean, but I need to send the parameters every time to the server.

I find the onClick event from the source code of the PagingToolbar, and only the page size and the limit for the page was passed to the server. Before I try to use the example written by JustinH, but the parameter filter was passed to the server one time only press the "Enter" button in the search field. If you click the page button(first, last, previous or next) the parameter filter was lost!

Then I try to open your link but I can see anything...:)

and then sorry for my bad english...:D

JorisA
3 Jul 2007, 1:08 AM
your right, but if you set a baseParam as trbs says, it will be send everytime you refresh the store. (hence the name :P)

lucazamm
3 Jul 2007, 2:35 AM
ok JorisA,

I am sorry....I am new to ext :D

I try to set the baseParam.

thanx!