Search in columns, grid in extjs4 - search

Question

I'm trying to build a search for the grids i just made. I tried LiveSearchGridPanel but it's too slow and buggy. So I'm trying to build a different search I do have in some old examples of grids in the application I'm working with. The code below is taken from the example i have, it uses:
fieldlabel:'Search',
puts the search inside a tbar and filters the results of the research by columns.
// search
{
xtype : 'combo',
enableKeyEvents : true,
fieldLabel : 'Search',
hideTrigger : true,
typeAhead : false,
editable : true,
listeners : {
'specialkey' : function(field, e) {
// pressing enter
if (e.keyCode == 13) {
if (field.lastValue != null|| field.lastValue != undefined) {
// if the search key isn't empty
var search = field.lastValue;
// remove old filter
if (store.isFiltered())
store.clearFilter(true);
// apply filter on fields selected
if (checked[0] == 1) {
if (checked[1] == 1)
if (checked[2] == 1)
store.filter([{
property : "admantN",
value : search,
anyMatch : true
}],
[{
property : "admant",
value : search,
anyMatch : true
}],
[{
property : "userN",
value : search,
anyMatch : true
}]);
else
store.filter([{
property : "admantN",
value : search,
anyMatch : true
}],
[{
property : "admant",
value : search,
anyMatch : true
}]);
else {
if (checked[2] == 1)
store.filter([{
property : "admantN",
value : search,
anyMatch : true
}],
[{
property : "userN",
value : search,
anyMatch : true
}]);
else
store.filter([{
property : "admantN",
value : search,
anyMatch : true
}]);
}
}
else {
if (checked[1] == 1)
if (checked[2] == 1)
store.filter([{
property : "userN",
value : search,
anyMatch : true
}],[{
property : "admant",
value : search,
anyMatch : true
}]);
else
store.filter([{
property : "admant",
value : search,
anyMatch : true
}]);
else
if (checked[2] == 1)
store.filter([{
property : "userN",
value : search,
anyMatch : true
}]);
}
search = "";
}
else {// if search key is blank remove old filters
if (store.isFiltered()) {
store.clearFilter();
}
}}}}// end listeners
},
// to select in which field search
{
xtype : 'checkboxgroup',
store : checked,
columns : 3,
vertical : false,
width : 250,
items : [
{
// Default searching field
boxLabel : 'Name',
checked : true
},
{boxLabel : 'Admant'},
{boxLabel : 'Username'}
],
listeners :
{
'change' :
// store checked field
function(th, newValue, oldValue) {
var ics = th.items.items;
for (i = 0; i < 3; i++) {
checked[i] = ics[i].checked;
}
}
}
},
// Refresh button
{
xtype : 'button',
text : 'Refresh',
icon : 'images/refresh.gif',
handler :
function() {
metodoA = "list";
// remove pending filters
if (store.isFiltered())
store.clearFilter(true);
// refresh data from the server
Ext.Ajax.request({
method : "GET",
url : ur + "admants?MetodoAD="+ metodoA + "&DBad=" + dbA,
timeout : 10000,
success :
function(response) {
var obj = null;
try {
obj = Ext.decode(response.responseText);
}
catch (error) {}
if (obj) {
store.loadData(obj);
}
else {
console.log('Invalid response');
}
},
failure :
function(response) {
alert("Refreshing request failed");
}
});}}]
// end toolbar's item
},// end tbar
The only problem copying this solution is that i cannot find any tutorial or manual that uses fieldlabel and tbar search to define a search box which will work only after i press the enter button and which is not a "live search".
Anyone has any hints?

Answer 1

The trick is simple, to create a search without the livesearchgridpanel you have to create an item in the table, which is called 'combo':
xtype: 'combo',
In the code pasted in the question you will have to change the value of the "store" keyword to mach with the keyword of your own store. This is used to retrieve the data to be shown after the research is made.It is done by the filter method of the store option.
After that you have to set the parameters of the filter function to mach the parameters in your store. The use the "checked" store to decide on which basis to operate your search. There is an array of three parameters in your example.
Place the whole code inside the "ext.grid.Panel" call.