PHP Code:
Ext.onReady(function() {
var startTime = new Date().getTime();
Ext.QuickTips.init();
//Ext.suspendLayouts();
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'date',
type: 'date'
}, {
name: 'visible',
type: 'boolean'
}, {
name: 'size'
}]
});
var beforeloadtime ='', loadtime ='';
var store = Ext.create('Ext.data.JsonStore', {
autoDestroy: true,
model: 'Product',
proxy: {
type: 'ajax',
url: 'grid-filter.json',
reader: {
type: 'json',
root: 'data',
idProperty: 'id',
totalProperty: 'total'
}
},
remoteSort: false,
sorters: [{
property: 'company',
direction: 'ASC'
}],
listeners: {
beforeload: {
fn: function() {
beforeloadtime = new Date().getTime();
}
},
load: {
fn: function() {
loadtime = new Date().getTime();
var dt = loadtime - beforeloadtime;
var dt2 = loadtime - startTime;
//store.resumeEvents()
console.info( ' extjs4.x total store load time (from store beforeload to load = '+ dt);
console.info( ' extjs4.x total time (from start to store load = '+ dt2);
}
},
datachanged: {
fn: function() {
var headerCt = grid.getComponent(0).headerCt,
headers = headerCt.getGridColumns(),
index = headerCt.items.findIndex('dataIndex', 'size'),
myCol = headers[index];
//myCol.setVisible( false );
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
border: false,
store: store,
columns: {
defaults: { sortable: true },
items: [{
dataIndex: 'id',
header: 'Id',
flxe: 1,
}, {
dataIndex: 'company',
header: 'Company',
flxe: 1,
id: 'company'
}, {
dataIndex: 'price',
flxe: 1,
header: 'Price'
}, {
dataIndex: 'size',
flxe: 1,
header: 'Size'
}, {
dataIndex: 'date',
flxe: 1,
header: 'Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'visible',
flxe: 1,
header: 'Visible'
}]
},
loadMask: true,
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],
listeners: {
afterlayout: {
fn: function(){
// console.info( ' afterlayout =' );
}
},
viewready: {
fn: function(){
var endTime = new Date().getTime() - startTime;
console.info( ' extjs4.x total view ready time (from start to view ready ) = '+ endTime);
}
},
render: {
fn: function(){
var endTime = new Date().getTime() - startTime;
console.info( ' extjs4.x total render time (from start to render ) = '+ endTime);
// store.suspendEvents();
store.load({
params: {
start: 0,
limit: 50
}
});
}
}
},
emptyText: 'No Matching Records',
title: 'Grid Filters Example',
height: 400,
width: 700,
layout: 'fit',
renderTo: Ext.getBody(),
});
});