X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/edit-grid.html
diff --git a/docs/source/edit-grid.html b/docs/source/edit-grid.html
new file mode 100644
index 00000000..3addeaef
--- /dev/null
+++ b/docs/source/edit-grid.html
@@ -0,0 +1,139 @@
+
+
+ The source code
+
+
+
+
+ Ext.onReady(function(){
+ Ext.QuickTips.init();
+
+ function formatDate(value){
+ return value ? value.dateFormat('M d, Y') : '';
+ }
+ // shorthand alias
+ var fm = Ext.form;
+
+ // custom column plugin example
+ var checkColumn = new Ext.grid.CheckColumn({
+ header: 'Indoor?',
+ dataIndex: 'indoor',
+ width: 55
+ });
+
+ // the column model has information about grid columns
+ // dataIndex maps the column to the specific data field in
+ // the data store (created below)
+ var cm = new Ext.grid.ColumnModel([{
+ id: 'common',
+ header: 'Common Name',
+ dataIndex: 'common',
+ width: 220,
+ // use shorthand alias defined above
+ editor: new fm.TextField({
+ allowBlank: false
+ })
+ },{
+ header: 'Light',
+ dataIndex: 'light',
+ width: 130,
+ editor: new fm.ComboBox({
+ typeAhead: true,
+ triggerAction: 'all',
+ transform:'light',
+ lazyRender: true,
+ listClass: 'x-combo-list-small'
+ })
+ },{
+ header: 'Price',
+ dataIndex: 'price',
+ width: 70,
+ align: 'right',
+ renderer: 'usMoney',
+ editor: new fm.NumberField({
+ allowBlank: false,
+ allowNegative: false,
+ maxValue: 100000
+ })
+ },{
+ header: 'Available',
+ dataIndex: 'availDate',
+ width: 95,
+ renderer: formatDate,
+ editor: new fm.DateField({
+ format: 'm/d/y',
+ minValue: '01/01/06',
+ disabledDays: [0, 6],
+ disabledDaysText: 'Plants are not available on the weekends'
+ })
+ },
+ checkColumn
+ ]);
+
+ // by default columns are sortable
+ cm.defaultSortable = true;
+
+ // create the Data Store
+ var store = new Ext.data.Store({
+ // load remote data using HTTP
+ url: 'plants.xml',
+
+ // specify a XmlReader (coincides with the XML format of the returned data)
+ reader: new Ext.data.XmlReader(
+ {
+ // records will have a 'plant' tag
+ record: 'plant'
+ },
+ // use an Array of field definition objects to implicitly create a Record constructor
+ [
+ // the 'name' below matches the tag name to read, except 'availDate'
+ // which is mapped to the tag 'availability'
+ {name: 'common', type: 'string'},
+ {name: 'botanical', type: 'string'},
+ {name: 'light'},
+ {name: 'price', type: 'float'},
+ // dates can be automatically converted by specifying dateFormat
+ {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
+ {name: 'indoor', type: 'bool'}
+ ]
+ ),
+
+ sortInfo: {field:'common', direction:'ASC'}
+ });
+
+ // create the editor grid
+ var grid = new Ext.grid.EditorGridPanel({
+ store: store,
+ cm: cm,
+ renderTo: 'editor-grid',
+ width: 600,
+ height: 300,
+ autoExpandColumn: 'common',
+ title: 'Edit Plants?',
+ frame: true,
+ plugins: checkColumn,
+ clicksToEdit: 1,
+ tbar: [{
+ text: 'Add Plant',
+ handler : function(){
+ // access the Record constructor through the grid's store
+ var Plant = grid.getStore().recordType;
+ var p = new Plant({
+ common: 'New Plant 1',
+ light: 'Mostly Shade',
+ price: 0,
+ availDate: (new Date()).clearTime(),
+ indoor: false
+ });
+ grid.stopEditing();
+ store.insert(0, p);
+ grid.startEditing(0, 0);
+ }
+ }]
+ });
+
+ // trigger the data store load
+ store.load();
+});
+
+
\ No newline at end of file