Filtering not working

[salmanb]

Hi, I am new to extjs and I am using the code provided in the example: http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function.

Everything works except for the filtering.
Here is a part of the code
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead);

filterButton = new Ext.Toolbar.MenuButton({
icon: 'public/image/list-items.gif',
cls: 'x-btn-text-icon',
text: 'Choose Filter',
tooltip: 'Select one of filter',
menu: {items: [
new Ext.menu.CheckItem({ text: 'Member Name', value: 'memberName', checked: false, group: 'filter', checkHandler: onItemCheck }),
new Ext.menu.CheckItem({ text: 'Ext', value: 'memberNumber', checked: false, group: 'filter', checkHandler: onItemCheck }),
new Ext.menu.CheckItem({ text: 'Group Name', value: 'groupName', checked: false, group: 'filter', checkHandler: onItemCheck })
]},
minWidth: 105
});
tb.add(filterButton);

// Create the filter field
var filter = Ext.get(tb.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input',
type: 'text',
size: '30',
value: '',
style: 'background: #F0F0F9;'
}).el);
// press enter keyboard
filter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER && this.getValue().length > 0) {// listen for the ENTER key
ds.load({params:{start:0, limit:myPageSize}});
}
});

filter.on('keyup', function(e) { // setup an onkeyup event handler
if(e.getKey() == e.BACKSPACE && this.getValue().length === 0) {// listen for the BACKSPACE key and the field being empty
ds.load({params:{start:0, limit:myPageSize}});
}
});

// Update search button text with selected item
function onItemCheck(item, checked)
{
if(checked) {
filterButton.setText(item.text + ':');
}
}


I am not sure whether the filtering has to be done by the js file or by the server? Any help is much appreciated

[BernardChhun]

if you want a complete filtering on all the data then it has to be on the server side.

have you run your code within firebug's debugger to check out what's happening in there and if the filter value reached the server?

[salmanb]

I am using the following lines of code on my js file
ds.on('beforeload', function() {
ds.baseParams = { // modify the baseParams setting for this request
filter: filter.getValue(),// retrieve the value of the filter input and assign it to a property named filter
filterTxt: filterButton.getText()
};
});
// trigger the data store load
ds.load({params:{start:0, limit:myPageSize}});

So, i am assuming that baseParams sends the parameters to the server

On the server i have the following
if(@$_GET['filter'])
{
$sql_count = "SELECT memberID, memberName
FROM Member
WHERE memberName=".$_GET['filter'];

}

I think that when I use filter: filter.getValue() then filter has the value of the search term and gets send to the server. But this won't do anything. I think I have a problem while sending and receiving params through the filter that i do not know what are the names and the values of the params.

[BernardChhun]

here's how I make it work:



function setGlobalValues(col, val){
// saving the column and its filter value in a global variable
wakaExt.filter_col = col;
wakaExt.filter_value = val;
}
function getFilterCol(){
// a simple function to get the selected column to filter
for (var x = 0 ; x < filterMenuItems.length; x ++){
var el = filterMenuItems[x];
if (el.selected){
return el.value;
}
}
return null;
}

function serverSideFiltering(e) {
var tb = wakaExt.pagingToolbar;
var ds = tb.ds;
var filterCol = getFilterCol();
var value = sstb.getValue();

if ((!value || value=='') && !ds.baseParams['filter_value']){
return;
}else if (value.length>0){
ds.baseParams.filter_col = filterCol;
ds.baseParams.filter_value = value;
setGlobalValues(filterCol, value);
}else{
ds.baseParams.filter_value = null;
ds.baseParams.filter_col = null;
setGlobalValues(null, null);
}
tb.cursor = 0; // reset cursor on new filter

ds.load({params:{start: this.pageCursor ? this.pageCursor: 0 , limit: tb.pageSize}});
wakaExt.clear();
};

// catching the enter button in the filter field
new Ext.KeyMap('ssfilter', {key: 13, fn: serverSideFiltering ,scope: this});



on the server side I only need to catch the "filter_col" & "filter_value" parameters and make my SELECT statement appropriately.

[salmanb]

thanks, i debugged it with firebugger and realized that i had a problem with my sql statement.

it works now.