Live Refreshing grid
HTML
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux/statusbar/StatusBar.js"></script>
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux/LiveSearchGridPanel.js"></script>
JavaScript
Ext.onReady(function () {
Ext.Loader.setConfig({
disableCaching: false,
enabled: true,
paths: {
'Ext.ux': 'http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux'
}
});
Ext.require(['Ext.ux.statusbar.StatusBar'], function () {
var store = Ext.create('Ext.data.Store', {
fields: ['hbc_status', 'phi_first_name', 'phi_last_name'],
data: [{
hbc_status: 'a',
phi_first_name: 'John',
phi_last_name: 'Do'
}]
});
var runner = new Ext.util.TaskRunner();
var grid = Ext.create('Ext.grid.Panel', {
height: 400,
title: "Admissions222",
frame: true,
renderTo: Ext.getBody(),
store: store,
loadMask: true,
columns: [{
header: 'Status',
dataIndex: 'hbc_status'
}, {
header: 'First Name',
dataIndex: 'phi_first_name'
}, {
header: 'Last Name',
dataIndex: 'phi_last_name'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Export CSV',
iconCls: 'add15',
menu: [{
xtype: 'form',
standardSubmit: true,
id: 'form',
bodyPadding: 5,
items: [{
xtype: 'datefield',
fieldLabel: 'From:',
name: 'start_date',
format: 'Y-m-d',
dataIndex: 'start_date'
}, {
xtype: 'datefield',
fieldLabel: 'To:',
name: 'end_date',
...