PDA

View Full Version : Search result: How to retrieve all row.



ismashkhy
24 Apr 2011, 10:43 PM
I have copy pasted some bunch of codes from internet regarding grid's search feature with a combox applied to a textfield.

now, my grid has paging bbar, that has 0-20 limit,

the search code is working fine until i figured out that the results only came from the active page. So you need to navigate other pages just to find a desired item.

I'm really new to extjs,

...


Ext.onReady(function(){
var griddata = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id','description','unitId','nunit_price','nqos','order_level'],
root: 'rows',
totalProperty:'results',
id:'id'
}),
proxy: new Ext.data.HttpProxy({
url: 'phpscripts/invgridpage.php?purchaselist=getlist'
}),
// autoLoad: true
});
var gridwin = new Ext.Window({
width:600,
height:500,
layout:'fit',
items:[{
xtype:'grid',
id:'gridPlist',
store:griddata,
autoFit:true,

columns: [
{header: "Id", dataIndex: 'id',hidden:true},
{header: "Description", dataIndex: 'description',width:200,id:'colDesc',sortable:true},
{header: "Unit", dataIndex: 'unitId',width:80,id:'colUnit'},
{header: "Unit Price", dataIndex: 'nunit_price',width:80,id:'colUnitPrice',type:'float'},
{header: "Current Stock", dataIndex: 'nqos',width:90,id:'colQoS',type:'float'},
{header: "Re-order Qty", dataIndex: 'order_level',width:90,id:'orderlvl',type:'float'}
],

selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),

bbar: new Ext.PagingToolbar({
pageSize: 20,
store: griddata,
displayInfo:true,
anchor:'100%',
autoFit:true}),

tbar:[
{
text:'Quick Search :'
},
new Ext.form.TextField({
id:'quicksearch'
}),
{
xtype:'button',
id:'btnsearch',
iconCls:'searchbtn',
handler: function() {
if (searchBox.getValue().length!=0) {
searchBox.setValue('');
griddata.clearFilter();
}
}
}

]


}]

});
gridwin.show();

//Grid search start------------------------------------------------------------------->
var searchStore = new Ext.data.SimpleStore({
fields: ['query'],
data: []
});
var searchBox = new Ext.form.ComboBox({
store: searchStore,
displayField: 'query',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
hideTrigger: true,
applyTo:'quicksearch'
});

var searchRec = Ext.data.Record.create([
{name: 'query', type: 'string'}
]);

var onFilteringBeforeQuery = function(e) {
//grid.getSelectionModel().clearSelections();
if (this.getValue().length==0) {
griddata.clearFilter();
} else {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value=="")
return;
griddata.filterBy(function(r) {
valueArr = value.split(/\ +/);
for (var i=0; i<valueArr.length; i++) {
re = new RegExp(Ext.escapeRe(valueArr[i]), "i");
if (re.test(r.data['description'])==false)
//&& re.test(r.data['light'])==false)
{
return false;
};
}
return true;
});
}
};

var onQuickSearchBeforeQuery = function(e) {
if (this.getValue().length==0) {
} else {
var value = this.getValue().replace(/^\s+|\s+$/g, "");
if (value=="")
return;
searchStore.clearFilter();
var vr_insert = true;
searchStore.each(function(r) {
if (r.data['query'].indexOf(value)==0) {
// backspace
vr_insert = false;
return false;
} else if (value.indexOf(r.data['query'])==0) {
// forward typing
searchStore.remove(r);
}
});
if (vr_insert==true) {
searchStore.each(function(r) {
if (r.data['query']==value) {
vr_insert = false;
}
});
}
if (vr_insert==true) {
var vr = new searchRec({query: value});
searchStore.insert(0, vr);
}
var ss_max = 4; // max 5 query history, starts counting from 0; 0==1,1==2,2==3,etc
if (searchStore.getCount()>ss_max) {
var ssc = searchStore.getCount();
var overflow = searchStore.getRange(ssc-(ssc-ss_max), ssc);
for (var i=0; i<overflow.length; i++) {
searchStore.remove(overflow[i]);
}
}
}
};

searchBox.on("beforequery", onQuickSearchBeforeQuery);
searchBox.on("beforequery", onFilteringBeforeQuery);
searchBox.on("select", onFilteringBeforeQuery);
griddata.load();
//Grid search end------------------------------------------------------------------->
});

See that the keyword is in page 2.

http://www.sencha.com/forum/http://i65.photobucket.com/albums/h205/ismashkhy/4-2.pnghttp://i65.photobucket.com/albums/h205/ismashkhy/4-2.png

In page 1, it doesn't return any result from the entire grid

http://i65.photobucket.com/albums/h205/ismashkhy/3-2.png

the search feature is working,

http://i65.photobucket.com/albums/h205/ismashkhy/1-2.png

It returned result that page 1 has...

http://i65.photobucket.com/albums/h205/ismashkhy/2-1.png

mitchellsimoens
25 Apr 2011, 5:20 AM
You will need to send the search query in another load call on your Store which will return the rows that match your query.

ismashkhy
25 Apr 2011, 8:25 PM
uhmn, how can i do that?....

drian
25 Apr 2011, 10:50 PM
if you want to keep the pagination for the search results as well, you need to use base params for the store.

store.setBaseParam('searchParam', searchParamValue);
store.load();

searchParam is the param name that is sent to the server and searchParamValue is the value that you type in the search box.

ismashkhy
26 Apr 2011, 12:07 AM
thank you,
i'm really grateful for any help that i can read from this topic,

but the way I see it, based on the actual behavior of the code to my project, the search is happening on the grid it self, there is no two way retrieval other than paging and refreshing the grid...which is I kinda like about this technique,

so, how can be possible to override the bbar or how can I make the search silently do a background paging and search the subject?...

or maybe, as I read my post over and over again,

I feel like, I think I am missing a lot...

....

drian
26 Apr 2011, 2:12 AM
i honestly wouldn't use the code you wrote. It's like adding all that big chunk of code just to solve a simple issue. Just put a textfield with an enter key event that calls your search function and another cancel button which uses the same function with empty param.

function search(reset){

if(!reset)
store.setBaseParam('searchParam', searchParamValue);
else
store.setBaseParam('searchParam', '');

store.load();
}

mitchellsimoens
26 Apr 2011, 5:14 AM
No, you do not have to use baseParams. baseParams are for parameters that need to always be sent. Good practice to leave them alone and send the params in your call that change.


store.load({
...
params : {
...
searchQuery : 'something'
}
});