- Replaced color picker form control with a more robust version.

2007-07-09 09:03:56 +00:00 · 2007-07-09 09:03:56 +00:00 · 6e0470771e
commit 6e0470771e
parent 6fe068e42d
1193 changed files with 342 additions and 223 deletions
--- a/www/extras/extjs/examples/grid/edit-grid.js
+++ b/www/extras/extjs/examples/grid/edit-grid.js
@ -0,0 +1,138 @@
+/*
+ * Ext JS Library 1.0.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    function formatBoolean(value){
+        return value ? 'Yes' : 'No';  
+    };
+    
+    function formatDate(value){
+        return value ? value.dateFormat('M d, Y') : '';
+    };
+    // shorthand alias
+    var fm = Ext.form, Ed = Ext.grid.GridEditor;
+
+    // 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([{
+           header: "Common Name",
+           dataIndex: 'common',
+           width: 220,
+           editor: new Ed(new fm.TextField({
+               allowBlank: false
+           }))
+        },{
+           header: "Light",
+           dataIndex: 'light',
+           width: 130,
+           editor: new Ed(new Ext.form.ComboBox({
+               typeAhead: true,
+               triggerAction: 'all',
+               transform:'light',
+               lazyRender:true
+            }))
+        },{
+           header: "Price",
+           dataIndex: 'price',
+           width: 70,
+           align: 'right',
+           renderer: 'usMoney',
+           editor: new Ed(new fm.NumberField({
+               allowBlank: false,
+               allowNegative: false,
+               maxValue: 10
+           }))
+        },{
+           header: "Available",
+           dataIndex: 'availDate',
+           width: 95,
+           renderer: formatDate,
+           editor: new Ed(new fm.DateField({
+                format: 'm/d/y',
+                minValue: '01/01/06',
+                disabledDays: [0, 6],
+                disabledDaysText: 'Plants are not available on the weekends'
+            }))
+        },{
+           header: "Indoor?",
+           dataIndex: 'indoor',
+           width: 55,
+           renderer: formatBoolean,
+           editor: new Ed(new fm.Checkbox())
+        }]);
+
+    // by default columns are sortable
+    cm.defaultSortable = true;
+
+    // this could be inline, but we want to define the Plant record
+    // type so we can add records dynamically
+    var Plant = Ext.data.Record.create([
+           // 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'},             // automatic date conversions
+           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
+           {name: 'indoor', type: 'bool'}
+      ]);
+
+    // create the Data Store
+    var ds = new Ext.data.Store({
+        // load using HTTP
+        proxy: new Ext.data.HttpProxy({url: 'plants.xml'}),
+
+        // the return will be XML, so lets set up a reader
+        reader: new Ext.data.XmlReader({
+               // records will have a "plant" tag
+               record: 'plant'
+           }, Plant)
+    });
+
+    // create the editor grid
+    var grid = new Ext.grid.EditorGrid('editor-grid', {
+        ds: ds,
+        cm: cm,
+        //selModel: new Ext.grid.RowSelectionModel(),
+        enableColLock:false
+    });
+
+    var layout = Ext.BorderLayout.create({
+        center: {
+            margins:{left:3,top:3,right:3,bottom:3},
+            panels: [new Ext.GridPanel(grid)]
+        }
+    }, 'grid-panel');
+
+
+    // render it
+    grid.render();
+
+    
+    var gridHead = grid.getView().getHeaderPanel(true);
+    var tb = new Ext.Toolbar(gridHead, [{
+        text: 'Add Plant',
+        handler : function(){
+            var p = new Plant({
+                common: 'New Plant 1',
+                light: 'Mostly Shade',
+                price: 0,
+                availDate: new Date(),
+                indoor: false
+            });
+            grid.stopEditing();
+            ds.insert(0, p);
+            grid.startEditing(0, 0);
+        }
+    }]);
+
+    // trigger the data store load
+    ds.load();
+});