3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
15 Ext.Loader.setConfig({
18 Ext.Loader.setPath('Ext.ux', '../ux');
21 'Ext.selection.CellModel',
30 Ext.onReady(function(){
32 function formatDate(value){
33 return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
37 extend: 'Ext.data.Model',
39 // the 'name' below matches the tag name to read, except 'availDate'
40 // which is mapped to the tag 'availability'
41 {name: 'common', type: 'string'},
42 {name: 'botanical', type: 'string'},
44 {name: 'price', type: 'float'},
45 // dates can be automatically converted by specifying dateFormat
46 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
47 {name: 'indoor', type: 'bool'}
52 // create the Data Store
53 var store = Ext.create('Ext.data.Store', {
54 // destroy the store if the grid is destroyed
59 // load remote data using HTTP
61 // specify a XmlReader (coincides with the XML format of the returned data)
64 // records will have a 'plant' tag
74 var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
78 // create the grid and specify what field you want
79 // to use for the editor at each header.
80 var grid = Ext.create('Ext.grid.Panel', {
84 header: 'Common Name',
101 ['Mostly Shady','Mostly Shady'],
102 ['Sun or Shade','Sun or Shade'],
103 ['Mostly Sunny','Mostly Sunny'],
107 listClass: 'x-combo-list-small'
116 xtype: 'numberfield',
123 dataIndex: 'availDate',
125 renderer: formatDate,
129 minValue: '01/01/06',
130 disabledDays: [0, 6],
131 disabledDaysText: 'Plants are not available on the weekends'
134 xtype: 'checkcolumn',
142 renderTo: 'editor-grid',
145 title: 'Edit Plants?',
149 handler : function(){
150 // Create a model instance
151 var r = Ext.create('Plant', {
152 common: 'New Plant 1',
153 light: 'Mostly Shady',
155 availDate: Ext.Date.clearTime(new Date()),
159 cellEditing.startEditByPosition({row: 0, column: 0});
162 plugins: [cellEditing]
165 // manually trigger the data store load
167 // store loading is asynchronous, use a load listener or callback to handle results
168 callback: function(){
170 title: 'Store Load Callback',
171 msg: 'store was loaded, data available for processing',