PDA

View Full Version : Grid search



galdaka
28 Aug 2007, 4:18 AM
(Sorry for my English)

Hey,

This is my solution for search into a grid. There are two types of search: ClienteSide and ServerSide, each of types are configurable for single or multiple search (Radiobuttons or checkitems in menu).

I add HistoryCombobox.js and ClearableCombobox.js in HistoryClearableCombobox.js, and I add two simple config options: hideComboTrigger and hideClearTrigger.

I create a reusable class (GridSearch) or create the search combos into a toolbar, I use HitoryClearableCombobox inside GridSearch.js:

[CODE] var search1 = new GridSearch({
tb: tb,
ds: ds,
cm: cm,
serverSearch: true,
quickSearch: true,
multipleServerSearch: true,
multipleQuickSearch: false,
serverSearchText: 'B

trbs
28 Aug 2007, 2:26 PM
Hey Galdaka,

Your lots quicker then i am :) My user extensions will take most likely at least a few more weeks until i've rewriten everything, cleaned it up and had time to published my user extension.

Think it's great too already provide this as a user extensions for other people, thanks mate!

I only have 2 questions for you:

I believe in credit where credit is due, please add a small credit/link to my PIR example. (and of course add credits for yourself too, btw i'm just asking it cause it would be nice :) ) also some of the standard doc types used in for example Jozef's extensions would be nice to have.
Please rename the Objects to Ext.ux.grid.GridSearch instead of gridsearch. So it's in the proper User eXtension namespace


Thanks for sharing !!

Regards,
trbs

kei
29 Aug 2007, 8:34 PM
Beautiful work, guys.
How do I make other config like setting emptyText, default selected columns, and the possibility of hiding the column selection menu? (Sounds like I'm planning a global grid search, ne? :) )

vibez
31 Aug 2007, 10:53 PM
Hello galdaka :)

Thank you very much for the grid search, it is just what I was looking for. unfortunately for me the button width for serverSearchText & quickSearchText does not automatically set to the correct width.

I have added your UX to the basic paging demo grid that comes in the extjs examples folder.

Here is the code using extjs 1.1.1

[PHP]/*
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
}, [
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'author'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}
]),

// turn on remote sorting
remoteSort: true
});


// pluggable renders
function renderTopic(value, p, record){
return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
}
function renderTopicPlain(value){
return String.format('<b><i>{0}</i></b>', value);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
}
function renderLastPlain(value){
return value.dateFormat('M j, Y, g:i a');
}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 490,
renderer: renderTopic,
css: 'white-space:normal;'
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastPost',
width: 150,
renderer: renderLast
}]);



// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true
});

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);

// render it
grid.render();

var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead);


var search1 = new GridSearch({
tb: tb,
ds: ds,
cm: cm,
serverSearch: true,
quickSearch: true,
multipleServerSearch: true,
multipleQuickSearch: false,
serverSearchText: 'B

kei
5 Sep 2007, 1:22 AM
Oh, I did notice that too and many other hardcoded stuff inside.
Apparently, the reason for that small text is simply an incorrect, if not appropriate, class.

See lines 53 and 168 of GridSearch.js.

cls: 'x-btn-icon', // replace with 'x-btn-text-icon' or 'x-btn-text'

vibez
5 Sep 2007, 3:43 AM
Thanks kei :) I did notice a lot of hard coded stuff too.

ashishgandhi
13 Sep 2007, 3:48 AM
great work guys...

but i was struggling with one problem is when user click on clear search the textfield got clear but the checkitem in the menu is not getting clear....i want that when user clicks on clear search the menu checkitem should have been clear too.....


plz help me if u have some solution

galdaka
13 Sep 2007, 4:37 AM
I don

dismay
14 Sep 2007, 4:43 AM
Hi galdaka!

Thanks for your GridSearch but I found a bug, maybe..

lets make some changes:
HistoryClearableComboBox.js
..
onTrigger2Click : function() {alert('test1'); this.reset()},
..
GridSearch.js::QuickSearch
...
this.searchBox.onTrigger2Click = function(){
alert('test2');
searchBox.setValue('');
searchBox.setRawValue(searchBox.emptyText);
searchBox.el.addClass(searchBox.emptyClass);
searchBox.disabled = true;
ds.clearFilter();
};

make demo page by vibez and click on trigger button in QuickSearch and see alert('test1');

why? help me please

galdaka
16 Sep 2007, 10:54 PM
Hi galdaka!

Thanks for your GridSearch but I found a bug, maybe..

lets make some changes:
HistoryClearableComboBox.js
..
onTrigger2Click : function() {alert('test1'); this.reset()},
..
GridSearch.js::QuickSearch
...
this.searchBox.onTrigger2Click = function(){
alert('test2');
searchBox.setValue('');
searchBox.setRawValue(searchBox.emptyText);
searchBox.el.addClass(searchBox.emptyClass);
searchBox.disabled = true;
ds.clearFilter();
};

make demo page by vibez and click on trigger button in QuickSearch and see alert('test1');

why? help me please

Remove alert

dismay
17 Sep 2007, 3:23 AM
:D
seriously..
I mean that this event

GridSearch.js::QuickSearch
....
this.searchBox.onTrigger2Click = function(){ .. }
....

is not processed, if even I will insert into function million alerts...

FF2, IE7

Thanks

kei
17 Sep 2007, 11:56 PM
I dunno much but I think the function this.searchBox.onTrigger2Click is not being used since the clearable box extends the Ext.form.ComboBox so doing this.reset does pretty much the same, clearing the box and fires the change events. But the author sure knows more of the details.

But if you wish to enable that this.searchBox.onTrigger2Click function, then just replace:
HistoryClearableComboBox.js

onTrigger2Click : function() {this.reset()},
with:

onTrigger2Click : function() {this.onTrigger2Click()},

GridSearch.js

this.searchBox.onTrigger2Click = function(){
alert('test2');
searchBox.setValue('');
};

dismay
18 Sep 2007, 2:33 AM
Thank you very much kei!! It is working!!

Just there is some wrong behavior: after entered some chars in Quick searchBox field and clicking on Trigger, searchBox field will get value = searchBox.emptyText, if we do focus on searchBox again, searchBox.emptyText will be as search string and do not disappear...

so, then I use this code:



....
this.searchBox.onTrigger2Click = function(){
searchBox.setValue('');
searchBox.setRawValue(searchBox.emptyText);
searchBox.el.addClass(searchBox.emptyClass);
searchBox.collapse();
searchBox.mimicBlur();
ds.clearFilter();
};
...
Thanks

vibez
18 Sep 2007, 4:25 AM
Can I ask what onTrigger2Click does?

SandeepDhamale
31 Aug 2009, 8:00 AM
I am new to ExtJs...Can you also post full working example of this? that will help a lot.. thanks a ton