Apply filter on store
How to apply filter on Extjs store of a combobox
HTML
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
Check the below link for detail explanation of this fiddle:
<br/>
<a href='http://atechiediary.blogspot.com/2013/06/extjs-how-to-filter-data-of-store-in.html'> Detail Blog entry </a>
<br/>
<br/>
JavaScript
// The data store containing the list of cars
var cars = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['key', 'name'],
data: [{
"key": "Benz",
"name": "Mercedes-Benz"
}, {
"key": "Audi",
"name": "Audi"
}, {
"key": "Ferrari",
"name": "Ferrari"
}, {
"key": "Prius",
"name": "Prius"
}, {
"key": "Lamborghini",
"name": "Lamborghini"
}, {
"key": "BMW",
"name": "BMW"
}]
});
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
items: [{
xtype: 'combobox',
fieldLabel: 'Choose Car',
labelWidth: 70,
store: cars,
queryMode: 'local',
displayField: 'name',
valueField: 'key'
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Filter',
defaultType: 'radiofield',
labelWidth: 40,
layout: 'hbox',
items: [{
boxLabel: 'Benz',
name: 'size',
id: 'radio1',
listeners: {
change: function (radio1, newvalue, oldvalue) {
//alert('radio1 - ' + newvalue + ' ::: ' + oldvalue);
if (newvalue) {
cars.clearFilter();
cars.filter('key', 'Benz');
}
}
}
}, {
boxLabel: 'BMW',
name: 'size',
id: 'radio2',
listeners: {
change: function (radio2, newvalue, oldvalue) {
//alert('radio2 - ' + newvalue + ' ::: ' + oldvalue);
if (newvalue) {
cars.clearFilter();
cars.filter('key', 'BMW');
}
}
}
}, {
boxLabel: 'Both',
name: 'size',
id: 'radio3',
listeners: {
change:...