1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | Ext.onReady(function(){ |
---|
8 | Ext.QuickTips.init(); |
---|
9 | |
---|
10 | function formatDate(value){ |
---|
11 | return value ? value.dateFormat('M d, Y') : ''; |
---|
12 | } |
---|
13 | // shorthand alias |
---|
14 | var fm = Ext.form; |
---|
15 | |
---|
16 | // custom column plugin example |
---|
17 | var checkColumn = new Ext.grid.CheckColumn({ |
---|
18 | header: 'Indoor?', |
---|
19 | dataIndex: 'indoor', |
---|
20 | width: 55 |
---|
21 | }); |
---|
22 | |
---|
23 | // the column model has information about grid columns |
---|
24 | // dataIndex maps the column to the specific data field in |
---|
25 | // the data store (created below) |
---|
26 | var cm = new Ext.grid.ColumnModel([{ |
---|
27 | id: 'common', |
---|
28 | header: 'Common Name', |
---|
29 | dataIndex: 'common', |
---|
30 | width: 220, |
---|
31 | // use shorthand alias defined above |
---|
32 | editor: new fm.TextField({ |
---|
33 | allowBlank: false |
---|
34 | }) |
---|
35 | },{ |
---|
36 | header: 'Light', |
---|
37 | dataIndex: 'light', |
---|
38 | width: 130, |
---|
39 | editor: new fm.ComboBox({ |
---|
40 | typeAhead: true, |
---|
41 | triggerAction: 'all', |
---|
42 | transform:'light', |
---|
43 | lazyRender: true, |
---|
44 | listClass: 'x-combo-list-small' |
---|
45 | }) |
---|
46 | },{ |
---|
47 | header: 'Price', |
---|
48 | dataIndex: 'price', |
---|
49 | width: 70, |
---|
50 | align: 'right', |
---|
51 | renderer: 'usMoney', |
---|
52 | editor: new fm.NumberField({ |
---|
53 | allowBlank: false, |
---|
54 | allowNegative: false, |
---|
55 | maxValue: 100000 |
---|
56 | }) |
---|
57 | },{ |
---|
58 | header: 'Available', |
---|
59 | dataIndex: 'availDate', |
---|
60 | width: 95, |
---|
61 | renderer: formatDate, |
---|
62 | editor: new fm.DateField({ |
---|
63 | format: 'm/d/y', |
---|
64 | minValue: '01/01/06', |
---|
65 | disabledDays: [0, 6], |
---|
66 | disabledDaysText: 'Plants are not available on the weekends' |
---|
67 | }) |
---|
68 | }, |
---|
69 | checkColumn |
---|
70 | ]); |
---|
71 | |
---|
72 | // by default columns are sortable |
---|
73 | cm.defaultSortable = true; |
---|
74 | |
---|
75 | // create the Data Store |
---|
76 | var store = new Ext.data.Store({ |
---|
77 | // load remote data using HTTP |
---|
78 | url: 'plants.xml', |
---|
79 | |
---|
80 | // specify a XmlReader (coincides with the XML format of the returned data) |
---|
81 | reader: new Ext.data.XmlReader( |
---|
82 | { |
---|
83 | // records will have a 'plant' tag |
---|
84 | record: 'plant' |
---|
85 | }, |
---|
86 | // use an Array of field definition objects to implicitly create a Record constructor |
---|
87 | [ |
---|
88 | // the 'name' below matches the tag name to read, except 'availDate' |
---|
89 | // which is mapped to the tag 'availability' |
---|
90 | {name: 'common', type: 'string'}, |
---|
91 | {name: 'botanical', type: 'string'}, |
---|
92 | {name: 'light'}, |
---|
93 | {name: 'price', type: 'float'}, |
---|
94 | // dates can be automatically converted by specifying dateFormat |
---|
95 | {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'}, |
---|
96 | {name: 'indoor', type: 'bool'} |
---|
97 | ] |
---|
98 | ), |
---|
99 | |
---|
100 | sortInfo: {field:'common', direction:'ASC'} |
---|
101 | }); |
---|
102 | |
---|
103 | // create the editor grid |
---|
104 | var grid = new Ext.grid.EditorGridPanel({ |
---|
105 | store: store, |
---|
106 | cm: cm, |
---|
107 | renderTo: 'editor-grid', |
---|
108 | width: 600, |
---|
109 | height: 300, |
---|
110 | autoExpandColumn: 'common', |
---|
111 | title: 'Edit Plants?', |
---|
112 | frame: true, |
---|
113 | plugins: checkColumn, |
---|
114 | clicksToEdit: 1, |
---|
115 | tbar: [{ |
---|
116 | text: 'Add Plant', |
---|
117 | handler : function(){ |
---|
118 | // access the Record constructor through the grid's store |
---|
119 | var Plant = grid.getStore().recordType; |
---|
120 | var p = new Plant({ |
---|
121 | common: 'New Plant 1', |
---|
122 | light: 'Mostly Shade', |
---|
123 | price: 0, |
---|
124 | availDate: (new Date()).clearTime(), |
---|
125 | indoor: false |
---|
126 | }); |
---|
127 | grid.stopEditing(); |
---|
128 | store.insert(0, p); |
---|
129 | grid.startEditing(0, 0); |
---|
130 | } |
---|
131 | }] |
---|
132 | }); |
---|
133 | |
---|
134 | // trigger the data store load |
---|
135 | store.load(); |
---|
136 | }); |
---|