JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>
JavaScript
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "[email protected]",
"phone": "555-111-1224"
}, {
'name': 'Lisa',
"email": "[email protected]",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "[email protected]",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "[email protected]",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'remove sort',
listeners: {
click: function () {
var grid = this.up('grid');
console.log(grid.store);
grid.store.sorters.clear();
grid.view.refresh();
grid.getStore().load();
}
}
}]
}],
renderTo: Ext.getBody()
});
});