/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){\r
- Ext.QuickTips.init();\r
\r
+ /**\r
+ * Handler specified for the 'Available' column renderer\r
+ * @param {Object} value\r
+ */\r
function formatDate(value){\r
return value ? value.dateFormat('M d, Y') : '';\r
}\r
+\r
// shorthand alias\r
var fm = Ext.form;\r
\r
- // custom column plugin example\r
+ // the check column is created using a custom plugin\r
var checkColumn = new Ext.grid.CheckColumn({\r
header: 'Indoor?',\r
dataIndex: 'indoor',\r
// the column model has information about grid columns\r
// dataIndex maps the column to the specific data field in\r
// the data store (created below)\r
- var cm = new Ext.grid.ColumnModel([{\r
- id: 'common',\r
- header: 'Common Name',\r
- dataIndex: 'common',\r
- width: 220,\r
- // use shorthand alias defined above\r
- editor: new fm.TextField({\r
- allowBlank: false\r
- })\r
- },{\r
- header: 'Light',\r
- dataIndex: 'light',\r
- width: 130,\r
- editor: new fm.ComboBox({\r
- typeAhead: true,\r
- triggerAction: 'all',\r
- transform:'light',\r
- lazyRender: true,\r
- listClass: 'x-combo-list-small'\r
- })\r
- },{\r
- header: 'Price',\r
- dataIndex: 'price',\r
- width: 70,\r
- align: 'right',\r
- renderer: 'usMoney',\r
- editor: new fm.NumberField({\r
- allowBlank: false,\r
- allowNegative: false,\r
- maxValue: 100000\r
- })\r
- },{\r
- header: 'Available',\r
- dataIndex: 'availDate',\r
- width: 95,\r
- renderer: formatDate,\r
- editor: new fm.DateField({\r
- format: 'm/d/y',\r
- minValue: '01/01/06',\r
- disabledDays: [0, 6],\r
- disabledDaysText: 'Plants are not available on the weekends'\r
- })\r
+ var cm = new Ext.grid.ColumnModel({\r
+ // specify any defaults for each column\r
+ defaults: {\r
+ sortable: true // columns are not sortable by default \r
},\r
- checkColumn\r
- ]);\r
-\r
- // by default columns are sortable\r
- cm.defaultSortable = true;\r
+ columns: [\r
+ {\r
+ id: 'common',\r
+ header: 'Common Name',\r
+ dataIndex: 'common',\r
+ width: 220,\r
+ // use shorthand alias defined above\r
+ editor: new fm.TextField({\r
+ allowBlank: false\r
+ })\r
+ }, {\r
+ header: 'Light',\r
+ dataIndex: 'light',\r
+ width: 130,\r
+ editor: new fm.ComboBox({\r
+ typeAhead: true,\r
+ triggerAction: 'all',\r
+ // transform the data already specified in html\r
+ transform: 'light',\r
+ lazyRender: true,\r
+ listClass: 'x-combo-list-small'\r
+ })\r
+ }, {\r
+ header: 'Price',\r
+ dataIndex: 'price',\r
+ width: 70,\r
+ align: 'right',\r
+ renderer: 'usMoney',\r
+ editor: new fm.NumberField({\r
+ allowBlank: false,\r
+ allowNegative: false,\r
+ maxValue: 100000\r
+ })\r
+ }, {\r
+ header: 'Available',\r
+ dataIndex: 'availDate',\r
+ width: 95,\r
+ renderer: formatDate,\r
+ editor: new fm.DateField({\r
+ format: 'm/d/y',\r
+ minValue: '01/01/06',\r
+ disabledDays: [0, 6],\r
+ disabledDaysText: 'Plants are not available on the weekends'\r
+ })\r
+ },\r
+ checkColumn // the plugin instance\r
+ ]\r
+ });\r
\r
// create the Data Store\r
var store = new Ext.data.Store({\r
+ // destroy the store if the grid is destroyed\r
+ autoDestroy: true,\r
+ \r
// load remote data using HTTP\r
url: 'plants.xml',\r
\r
// specify a XmlReader (coincides with the XML format of the returned data)\r
- reader: new Ext.data.XmlReader(\r
- {\r
- // records will have a 'plant' tag\r
- record: 'plant'\r
- },\r
+ reader: new Ext.data.XmlReader({\r
+ // records will have a 'plant' tag\r
+ record: 'plant',\r
// use an Array of field definition objects to implicitly create a Record constructor\r
- [\r
+ fields: [\r
// the 'name' below matches the tag name to read, except 'availDate'\r
// which is mapped to the tag 'availability'\r
{name: 'common', type: 'string'},\r
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
{name: 'indoor', type: 'bool'}\r
]\r
- ),\r
+ }),\r
\r
sortInfo: {field:'common', direction:'ASC'}\r
});\r
renderTo: 'editor-grid',\r
width: 600,\r
height: 300,\r
- autoExpandColumn: 'common',\r
+ autoExpandColumn: 'common', // column with this id will be expanded\r
title: 'Edit Plants?',\r
frame: true,\r
+ // specify the check column plugin on the grid so the plugin is initialized\r
plugins: checkColumn,\r
clicksToEdit: 1,\r
tbar: [{\r
}]\r
});\r
\r
- // trigger the data store load\r
- store.load();\r
+ // manually trigger the data store load\r
+ store.load({\r
+ // store loading is asynchronous, use a load listener or callback to handle results\r
+ callback: function(){\r
+ Ext.Msg.show({\r
+ title: 'Store Load Callback',\r
+ msg: 'store was loaded, data available for processing',\r
+ modal: false,\r
+ icon: Ext.Msg.INFO,\r
+ buttons: Ext.Msg.OK\r
+ });\r
+ }\r
+ });\r
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff