In this article, I’m explaining how to filter data in list component in sencha touch.
If you want to learn list component in sencha touch, then you can read my previous article:
http://www.mindstick.com/Articles/d6eaa43d-649b-4da3-a450-000fce8c2ae3/?List%20in%20Sencha%20Touch
Example
Step-1:
Firstly create a store with three fields name, league and division and add data through data configuration, also add filter to the store through filter configuration, in filter configuration set property to division and value to West.
Ext.define('MyApp.store.TeamStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
name: 'New York Yankee',
league: 'AL',
division: 'East'
},
{
name: 'Tampa Bay',
league: 'AL',
division: 'East'
},
{
name: 'Boston',
league: 'AL',
division: 'East'
},
{
name: 'Toronto',
league: 'AL',
division: 'East'
},
{
name: 'Baltimore',
league: 'AL',
division: 'East'
},
{
name: 'Detroit',
league: 'AL',
division: 'Central'
},
{
name: 'CleveLand',
league: 'AL',
division: 'Central'
},
{
name: 'Chicago White Sox',
league: 'AL',
division: 'Central'
},
{
name: 'Kansas City',
league: 'AL',
division: 'Central'
},
{
name: 'Minniesota',
league: 'AL',
division: 'Central'
},
{
name: 'Texas',
league: 'AL',
division: 'West'
},
{
name: 'Los Angeles Angels',
league: 'AL',
division: 'West'
},
{
name: 'Oakland',
league: 'AL',
division: 'West'
},
{
name: 'Seattle',
league: 'AL',
division: 'West'
}
],
storeId: 'TeamStore',
fields: [
{
name: 'name'
},
{
name: 'league'
},
{
name: 'division'
}
],
filters: {
property: 'division',
value: [
'West'
]
}
}
});Step-2:
Next drag-n-drop the list to the canvas and add store to it through store configuration. Add a toolbar to the list and four buttons to the toolbar.
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'TeamStore',
itemTpl: [
'<div>{name}</div>'
],
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
id: 'WestOnly',
itemId: 'mybutton',
text: 'West Only'
},
{
xtype: 'button',
id: 'CentralOnly',
itemId: 'mybutton1',
text: 'Central Only'
},
{
xtype: 'button',
id: 'EastOnly',
itemId: 'mybutton2',
text: 'East Only'
},
{
xtype: 'button',
docked: 'right',
id: 'ClearFilters',
itemId: 'mybutton3',
ui: 'decline',
text: 'Clear Filters'
}
]
}
],
listeners: [
{
fn: 'onWestOnlyTap',
event: 'tap',
delegate: '#WestOnly'
},
{
fn: 'onCentralOnlyTap',
event: 'tap',
delegate: '#CentralOnly'
},
{
fn: 'onEastOnlyTap',
event: 'tap',
delegate: '#EastOnly'
},
{
fn: 'onClearFiltersTap',
event: 'tap',
delegate: '#ClearFilters'
}
]
},
onWestOnlyTap: function(button, e, eOpts) {
var sto = Ext.getStore('TeamStore');
sto.clearFilter();
sto.filter('division', 'West');
},
onCentralOnlyTap: function(button, e, eOpts) {
var sto = Ext.getStore('TeamStore');
sto.clearFilter();
sto.filter('division', 'Central');
},
onEastOnlyTap: function(button, e, eOpts) {
var sto = Ext.getStore('TeamStore');
sto.clearFilter();
sto.filter('division', 'East');
},
onClearFiltersTap: function(button, e, eOpts) {
Ext.getStore('TeamStore').clearFilter();
}
});Output
Leave Comment