-/*!
- * Ext JS Library 3.3.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function(){
- Ext.QuickTips.init();
+Ext.require([
+ 'Ext.grid.*',
+ 'Ext.data.*',
+ 'Ext.util.*',
+ 'Ext.state.*'
+]);
- // NOTE: This is an example showing simple state management. During development,
- // it is generally best to disable state management as dynamically-generated ids
- // can change across page loads, leading to unpredictable results. The developer
- // should ensure that stable state ids are set for stateful components in real apps.
- Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+Ext.onReady(function() {
+ Ext.QuickTips.init();
+
+ // setup the state provider, all state information will be saved to a cookie
+ Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// sample static data for the store
var myData = [
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
- ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
+ ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
}
// create the data store
- var store = new Ext.data.ArrayStore({
+ var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ]
+ ],
+ data: myData
});
- // manually load local data
- store.loadData(myData);
-
// create the Grid
- var grid = new Ext.grid.GridPanel({
+ var grid = Ext.create('Ext.grid.Panel', {
store: store,
+ stateful: true,
+ stateId: 'stateGrid',
columns: [
{
- id :'company',
- header : 'Company',
- width : 160,
- sortable : true,
+ text : 'Company',
+ flex : 1,
+ sortable : false,
dataIndex: 'company'
},
{
- header : 'Price',
- width : 75,
- sortable : true,
- renderer : 'usMoney',
+ text : 'Price',
+ width : 75,
+ sortable : true,
+ renderer : 'usMoney',
dataIndex: 'price'
},
{
- header : 'Change',
- width : 75,
- sortable : true,
- renderer : change,
+ text : 'Change',
+ width : 75,
+ sortable : true,
+ renderer : change,
dataIndex: 'change'
},
{
- header : '% Change',
- width : 75,
- sortable : true,
- renderer : pctChange,
+ text : '% Change',
+ width : 75,
+ sortable : true,
+ renderer : pctChange,
dataIndex: 'pctChange'
},
{
- header : 'Last Updated',
- width : 85,
- sortable : true,
- renderer : Ext.util.Format.dateRenderer('m/d/Y'),
+ text : 'Last Updated',
+ width : 85,
+ sortable : true,
+ renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
- this.items[1].tooltip = 'Do not buy!';
+ this.items[1].tooltip = 'Hold stock';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
- alert("Buy " + rec.get('company'));
+ alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
}
}]
}
],
- stripeRows: true,
- autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
- // config options for stateful behavior
- stateful: true,
- stateId: 'grid'
+ renderTo: 'grid-example',
+ viewConfig: {
+ stripeRows: true
+ }
});
-
- // render the grid to the specified div in the page
- grid.render('grid-example');
-});
\ No newline at end of file
+});