JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all-debug.css">
<script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
JavaScript
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: [ 'name', 'sex', 'count' ],
data: [
{ name: 'Bill', sex: 'Male', count: 0 },
{ name: 'Steve', sex: 'Male', count: 0 },
{ name: 'Larry', sex: 'Male', count: 0 },
{ name: 'Michelle', sex: 'Female', count: 0 },
{ name: 'Laura', sex: 'Female', count: 0 },
{ name: 'Monica', sex: 'Female', count: 0 }
],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'Count', dataIndex: 'count', width: 50 },
{ header: 'Name', dataIndex: 'name', flex: 1 },
{ header: 'Sex', dataIndex: 'sex' }
]
});
Ext.create('Ext.window.Window', {
width: 300,
height: 250,
layout: 'fit',
items: grid,
tbar: [{
xtype: 'button',
text: 'Only show female',
enableToggle: true,
handler: function() {
store.clearFilter();
if (this.pressed) {
store.filter('sex', 'Female');
}
}
},{
xtype: 'button',
text: 'Increase count',
handler: function() {
// Clone the filters-object of the store
var filters = Ext.apply({}, store.filters);
store.clearFilter(true);
store.each(function(record) {
record.set('count', record.get('count') + 1);
});
filters.each(function(filter) {
...