Please help with filter !!!

[IgorMan2]

i have input box, button and grid with remote filter.

when i type text in input box and then press button i want that in grid show records filtered by text in inputbox, how can a do it?


itemclick: function(){
FilterByNode = Ext.create('Ext.util.Filter', {property: 'email', value: '123', root: 'data'});
CatalogItemsStore.filter(FilterByNode );
}


when i click item - server php side get filter once
when i click again - server php side get filter+filter
when i click again - server php side get filter+filter+filter

why that?

when i call before clear filter - server php side get without filter and then with filter

HOW RIGHT ???

[scottmartin]

You should send the params to the server and have the server return the filtered data
Please have a look at the following example:

// client code


Ext.onReady(function(){

Ext.define('model', {
extend: 'Ext.data.Model',
idProperty: 'abbr',
fields: [
{ name: 'abbr' },
{ name: 'name' },
{ name: 'slogan' }
],
proxy: {
type: 'ajax',
actionMethods: 'POST',
url: 'server.php',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
},

afterRequest: function(request,success){
console.log(request);
console.log(success);
}

}

});

var store = Ext.create('Ext.data.Store', {
autoLoad: true, // also tested false using button to load
type: 'json',
model: 'model',
pageSize: 35,
remoteSort: true,
sorters: [
{
property : 'abbr',
direction: 'ASC'
}
],
listeners: {
beforeload: function(){
var searchValue = toolbar.down('#search-field').value;
store.getProxy().extraParams = {}; // clear all previous
store.getProxy().extraParams.search = searchValue; // update persistent param

}
}

});

var toolbar = Ext.create('widget.toolbar', {
dock: 'top',
ui: 'default',
items: ['Search',
{
xtype: 'textfield',
itemId: 'search-field',
name: 'searchField',
hideLabel: true,
width: 200
},
{
xtype: 'button',
text: '<<< search value',
handler: function(){
store.load(
{
params : {
start: 0,
limit: 35,
sort: '[{"property":"abbr","direction":"ASC"}]'
},
callback: function(records,operation,success){
// inspect: operation.resultSet.message (object)
// inspect: operation.response.responseText (json)
}
});
}
}
]
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text : 'State',
width : 75,
sortable : true,
dataIndex: 'abbr'
},
{
text : 'Name',
width : 175,
sortable : true,
dataIndex: 'name'
},
{
text : 'Slogan',
flex : 1,
sortable : true,
dataIndex: 'slogan'
},

],

//height: 650,
width: 600,
title: 'JSON Grid',
renderTo: Ext.getBody(),

viewConfig: {
loadingHeight: 150,
loadingText: 'This is a loading text message ...'
},

dockedItems: [
toolbar
],

bbar: Ext.create('Ext.PagingToolbar', {
store: store,
itemId: 'paging-toolbar',
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: 'No records to display'
})

});

var button = new Ext.Button({
text: 'load store',
width: 150,
renderTo: Ext.getBody(),
handler: function(){
store.load();
}
});

var searchField = toolbar.down('#search-field');
searchField.focus();

});


// server code


<?php

function get_json_value($json,$key)
{
$result = NULL;
if(function_exists('json_decode')) {
$jsonData = json_decode($json, TRUE);
$result = $jsonData[0][$key];
}
return $result;
}

//database parameters
$user='user';
$pw='password';
$db='sencha';
$table='states';

//make database connection
$connection = mysql_connect("localhost", $user, $pw) or
die("Could not connect: " . mysql_error());
mysql_select_db($db) or die("Could not select database");

$task = ($_POST['task']) ? ($_POST['task']) : 'read';

//switchboard for the CRUD task requested
switch($task){
case "read":
showData('states');
break;
default:
echo "{failure:true}";
break;
}

function showData($table)
{
$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);

$sort = (isset($_POST['sort']) ? $_POST['sort'] : $_GET['sort']);

$search = (isset($_POST['search']) ? $_POST['search'] : $_GET['search']);

$ord = get_json_value($sort,'property');
$dir = get_json_value($sort,'direction');

$query = 'SELECT * FROM ' . $table;
if (!empty($search)){
$query .= ' WHERE name LIKE "%'.$search.'%"'; // filter data if needed
}
$query .= ' ORDER BY ' . $ord .' '. $dir; // order data

$sql = $query . ' LIMIT ' . $start . ', '. $end;

$result_count = mysql_query($query); // get all results for paging; no limit set
$rows = mysql_num_rows($result_count); // return row count for paging

$result = mysql_query($sql); // result set

while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
$arr[] = $rec;
};

$data = json_encode($arr); //encode the data in json format

echo $cb . '({"total":"' . $rows . '","data":' . $data . '})';
}

?>


// sql code


CREATE TABLE IF NOT EXISTS `states` (
`abbr` varchar(2) NOT NULL,
`name` varchar(50) NOT NULL,
`slogan` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `states` (`abbr`, `name`, `slogan`) VALUES
('AL', 'Alabama', ''),
('AK', 'Alaska', ''),
('AZ', 'Arizona', ''),
('AR', 'Arkansas', ''),
('CA', 'California', ''),
('CO', 'Colorado', ''),
('CT', 'Connecticut', ''),
('DE', 'Delaware', ''),
('DC', 'District of Columbia', ''),
('FL', 'Florida', ''),
('GA', 'Georgia', ''),
('HI', 'Hawaii', ''),
('ID', 'Idaho', ''),
('IL', 'Illinois', ''),
('IN', 'Indiana', ''),
('IA', 'Iowa', ''),
('KS', 'Kansas', ''),
('KY', 'Kentucky', ''),
('LA', 'Louisiana', ''),
('ME', 'Maine', ''),
('MD', 'Maryland', ''),
('MA', 'Massachusetts', ''),
('MI', 'Michigan', ''),
('MN', 'Minnesota', ''),
('MS', 'Mississippi', ''),
('MO', 'Missouri', ''),
('MT', 'Montana', ''),
('NE', 'Nebraska', ''),
('NV', 'Nevada', ''),
('NH', 'New Hampshire', ''),
('NJ', 'New Jersey', ''),
('NM', 'New Mexico', ''),
('NY', 'New York', ''),
('NC', 'North Carolina', ''),
('ND', 'North Dakota', ''),
('OH', 'Ohio', ''),
('OK', 'Oklahoma', ''),
('OR', 'Oregon', ''),
('PA', 'Pennsylvania', ''),
('RI', 'Rhode Island', ''),
('SC', 'South Carolina', ''),
('SD', 'South Dakota', ''),
('TN', 'Tennessee', ''),
('TX', 'Texas', ''),
('UT', 'Utah', ''),
('VT', 'Vermont', ''),
('VA', 'Virginia', ''),
('WA', 'Washington', ''),
('WV', 'West Virginia', ''),
('WI', 'Wisconsin', ''),
('WY', 'Wyoming', '');


Regards,
Scott.

[vietits]

See my fix in red color:


itemclick: function(){
FilterByNode = Ext.create('Ext.util.Filter', {property: 'email', value: '123', root: 'data'});
CatalogItemsStore.clearFilter(true); // clear old filters with suppressing event
CatalogItemsStore.filter(FilterByNode );
}

[scottmartin]

Why would you want to send all of the data back and then filter it? Why not send only the filtered data?

Regards,
SCott.

[vietits]

My suggestion is to fix what IgorMan2 asked in the first post:
- Without calling CatalogItemsStore.clearFilter(true) before calling CatalogItemsStore.filter(FilterByNode), the new filter will be added to the current filter list of the store and all these filters will be sent to server. This is answer for the first question:


when i click item - server php side get filter once
when i click again - server php side get filter+filter
when i click again - server php side get filter+filter+filter


why that?

- Calling CatalogItemsStore.clearFilter() (without supressing event) will clear all filters and cause store to load data with no filter. The next line - CatalogItemsStore.filter(FilterByNode), will cause store to load data again. This time with filter. This is answer for the second question:


when i call before clear filter - server php side get without filter and then with filter