3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
10 * Handler specified for the 'Available' column renderer
11 * @param {Object} value
13 function formatDate(value){
14 return value ? value.dateFormat('M d, Y') : '';
20 // the check column is created using a custom plugin
21 var checkColumn = new Ext.grid.CheckColumn({
27 // the column model has information about grid columns
28 // dataIndex maps the column to the specific data field in
29 // the data store (created below)
30 var cm = new Ext.grid.ColumnModel({
31 // specify any defaults for each column
33 sortable: true // columns are not sortable by default
38 header: 'Common Name',
41 // use shorthand alias defined above
42 editor: new fm.TextField({
49 editor: new fm.ComboBox({
52 // transform the data already specified in html
55 listClass: 'x-combo-list-small'
63 editor: new fm.NumberField({
70 dataIndex: 'availDate',
73 editor: new fm.DateField({
77 disabledDaysText: 'Plants are not available on the weekends'
80 checkColumn // the plugin instance
84 // create the Data Store
85 var store = new Ext.data.Store({
86 // destroy the store if the grid is destroyed
89 // load remote data using HTTP
92 // specify a XmlReader (coincides with the XML format of the returned data)
93 reader: new Ext.data.XmlReader({
94 // records will have a 'plant' tag
96 // use an Array of field definition objects to implicitly create a Record constructor
98 // the 'name' below matches the tag name to read, except 'availDate'
99 // which is mapped to the tag 'availability'
100 {name: 'common', type: 'string'},
101 {name: 'botanical', type: 'string'},
103 {name: 'price', type: 'float'},
104 // dates can be automatically converted by specifying dateFormat
105 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
106 {name: 'indoor', type: 'bool'}
110 sortInfo: {field:'common', direction:'ASC'}
113 // create the editor grid
114 var grid = new Ext.grid.EditorGridPanel({
117 renderTo: 'editor-grid',
120 autoExpandColumn: 'common', // column with this id will be expanded
121 title: 'Edit Plants?',
123 // specify the check column plugin on the grid so the plugin is initialized
124 plugins: checkColumn,
128 handler : function(){
129 // access the Record constructor through the grid's store
130 var Plant = grid.getStore().recordType;
132 common: 'New Plant 1',
133 light: 'Mostly Shade',
135 availDate: (new Date()).clearTime(),
140 grid.startEditing(0, 0);
145 // manually trigger the data store load
147 // store loading is asynchronous, use a load listener or callback to handle results
148 callback: function(){
150 title: 'Store Load Callback',
151 msg: 'store was loaded, data available for processing',