Grid search

[galdaka]

(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]

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:

1. 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.
2. 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]

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]

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.
* licensing@extjs.com
*
* 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]

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]

Thanks kei I did notice a lot of hard coded stuff too.

[ashishgandhi]

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]

I don

[dismay]

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]

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