Problem using combo as a filter for grid panel data.

[simonr26]

Hello,


Am using ext js 4.


I would like to use a combo box to filter data contained in a grid
panel. i.e. retain the rows in the grid if they match the combo box
selection.


The problem I'm having is that I am able to filter data in
the grid based on the entry in the combo box (using store.filter...)
- however this removes the store/grid entries and when I select a
different combo entry or clear the entry, the entries in the grid/store
are not available.


n.b. am new to ext js


Have included the code below.
Please can you suggest an appropriate solution.
I have tried to reload the data to the store - however this didn't work
and is also not synchronous. How do I reload the store data?
For performance reasons, is there a way of filtering the data locally
rather than having to make a new ajax (remote) call to refresh the store
contents?


I have used combo box as a docked item - I may change this to use it in a
different container/component.
I shall be using MVC - i.e. have mvc classes in different folders -
however to show problem have placed in one file.





// app.js:


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'}
]
});


Ext.define('Users', {
extend: 'Ext.data.Store',
model: 'User',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/users.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});


var userStore;
var pan;


Ext.application({

launch: function() {


userStore = Ext.create('Users');


Ext.define('GPanel' ,{
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
store: userStore,
id: 'grd',
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Phone Number',
dataIndex: 'phone'
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'combo',
fieldLabel: 'Filter',
store: {
fields: ['name'],
data : [
{name: 'Bart'},
{name: 'Marge'}
]
},
displayField: 'name',
editable : false,
listeners:{
scope: this,
'select': function(combo, record, index) {
var g = Ext.getCmp('grd');
g.store.filter('name', combo.getValue());
}
}
}]
}]
});
pan = Ext.create('GPanel');
}
});



// data/users.json:
{
success: true,
users: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-122455' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
}






Kind Regards,
Simon

[flanders]

The records don't get realy deleted, just put away because you are filtering them out.

If you filter() the same store again, you are actually adding an extra filter by default. Not replacing the exisiting onces. If you go through the documentation and specifically the comment of jlindbergh on the filter() method it is explained quitte nicely.

Another approach is using clearFilters(). But it's really all in the docs on filtering.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-filter