JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dev.sencha.com/extjs/5.0.0/ext-all-debug.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/extjs/5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
JavaScript
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'clientsStore',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'income',
type: 'float'
}],
data: {
'items': [{
'name': 'John',
"income": 150.00
}, {
'name': 'Celine',
"income": 150.00
}, {
'name': 'Marie',
"income": 1000.00
}, {
'name': 'James',
"income": 2000.00
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Clients',
requires: ['Ext.grid.filters.Filters'],
plugins: 'gridfilters',
width: 300,
height: 300,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
tooltip: 'Filter by Name (J*)',
text: 'By Name (J*)',
enableToggle: true,
pressed: true,
handler: function () {
grid.filters.store.clearFilter(false);
var column = grid.columnManager.getColumns()[0];
column.filter.setValue('J');
column.filter.enable();
//grid.filters.store.addFilter({ operator: 'like', property: 'name', value: 'J'});
}
}, {
tooltip: 'Clean Filters',
text: 'Clean Filters',
enableToggle: true,
pressed: true,
handler: function () {
grid.filters.store.clearFilter(false);
//grid.filters.store.addFilter({ operator: 'gt',property: 'income',value: 0});
...