/*!
- * Ext JS Library 3.0.0
+ * Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
// should ensure that stable state ids are set for stateful components in real apps. \r
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
\r
+ // sample static data for the store\r
var myData = [\r
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],\r
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],\r
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']\r
];\r
\r
- // example of custom renderer function\r
+ /**\r
+ * Custom function used for column renderer\r
+ * @param {Object} val\r
+ */\r
function change(val){\r
if(val > 0){\r
return '<span style="color:green;">' + val + '</span>';\r
return val;\r
}\r
\r
- // example of custom renderer function\r
+ /**\r
+ * Custom function used for column renderer\r
+ * @param {Object} val\r
+ */\r
function pctChange(val){\r
if(val > 0){\r
return '<span style="color:green;">' + val + '%</span>';\r
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}\r
]\r
});\r
+\r
+ // manually load local data\r
store.loadData(myData);\r
\r
// create the Grid\r
var grid = new Ext.grid.GridPanel({\r
store: store,\r
columns: [\r
- {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},\r
- {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},\r
- {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},\r
- {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},\r
- {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
+ {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},\r
+ {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},\r
+ {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},\r
+ {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},\r
+ {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
],\r
stripeRows: true,\r
autoExpandColumn: 'company',\r
- height:350,\r
- width:600,\r
- title:'Array Grid'\r
+ height: 350,\r
+ width: 600,\r
+ title: 'Array Grid',\r
+ // config options for stateful behavior\r
+ stateful: true,\r
+ stateId: 'grid' \r
});\r
+ \r
+ // render the grid to the specified div in the page\r
grid.render('grid-example');\r
});
\ No newline at end of file