Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / grid / edit-grid.js
index 3d9daff..6ce5000 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
-Ext.onReady(function(){\r
-\r
-    /**\r
-     * Handler specified for the 'Available' column renderer\r
-     * @param {Object} value\r
-     */\r
-    function formatDate(value){\r
-        return value ? value.dateFormat('M d, Y') : '';\r
-    }\r
-\r
-    // shorthand alias\r
-    var fm = Ext.form;\r
-\r
-    // the check column is created using a custom plugin\r
-    var checkColumn = new Ext.grid.CheckColumn({\r
-       header: 'Indoor?',\r
-       dataIndex: 'indoor',\r
-       width: 55\r
-    });\r
-\r
-    // the column model has information about grid columns\r
-    // dataIndex maps the column to the specific data field in\r
-    // the data store (created below)\r
-    var cm = new Ext.grid.ColumnModel({\r
-        // specify any defaults for each column\r
-        defaults: {\r
-            sortable: true // columns are not sortable by default           \r
-        },\r
-        columns: [\r
-            {\r
-                id: 'common',\r
-                header: 'Common Name',\r
-                dataIndex: 'common',\r
-                width: 220,\r
-                // use shorthand alias defined above\r
-                editor: new fm.TextField({\r
-                    allowBlank: false\r
-                })\r
-            }, {\r
-                header: 'Light',\r
-                dataIndex: 'light',\r
-                width: 130,\r
-                editor: new fm.ComboBox({\r
-                    typeAhead: true,\r
-                    triggerAction: 'all',\r
-                    // transform the data already specified in html\r
-                    transform: 'light',\r
-                    lazyRender: true,\r
-                    listClass: 'x-combo-list-small'\r
-                })\r
-            }, {\r
-                header: 'Price',\r
-                dataIndex: 'price',\r
-                width: 70,\r
-                align: 'right',\r
-                renderer: 'usMoney',\r
-                editor: new fm.NumberField({\r
-                    allowBlank: false,\r
-                    allowNegative: false,\r
-                    maxValue: 100000\r
-                })\r
-            }, {\r
-                header: 'Available',\r
-                dataIndex: 'availDate',\r
-                width: 95,\r
-                renderer: formatDate,\r
-                editor: new fm.DateField({\r
-                    format: 'm/d/y',\r
-                    minValue: '01/01/06',\r
-                    disabledDays: [0, 6],\r
-                    disabledDaysText: 'Plants are not available on the weekends'\r
-                })\r
-            },\r
-            checkColumn // the plugin instance\r
-        ]\r
-    });\r
-\r
-    // create the Data Store\r
-    var store = new Ext.data.Store({\r
-        // destroy the store if the grid is destroyed\r
-        autoDestroy: true,\r
-        \r
-        // load remote data using HTTP\r
-        url: 'plants.xml',\r
-\r
-        // specify a XmlReader (coincides with the XML format of the returned data)\r
-        reader: new Ext.data.XmlReader({\r
-            // records will have a 'plant' tag\r
-            record: 'plant',\r
-            // use an Array of field definition objects to implicitly create a Record constructor\r
-            fields: [\r
-                // the 'name' below matches the tag name to read, except 'availDate'\r
-                // which is mapped to the tag 'availability'\r
-                {name: 'common', type: 'string'},\r
-                {name: 'botanical', type: 'string'},\r
-                {name: 'light'},\r
-                {name: 'price', type: 'float'},             \r
-                // dates can be automatically converted by specifying dateFormat\r
-                {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
-                {name: 'indoor', type: 'bool'}\r
-            ]\r
-        }),\r
-\r
-        sortInfo: {field:'common', direction:'ASC'}\r
-    });\r
-\r
-    // create the editor grid\r
-    var grid = new Ext.grid.EditorGridPanel({\r
-        store: store,\r
-        cm: cm,\r
-        renderTo: 'editor-grid',\r
-        width: 600,\r
-        height: 300,\r
-        autoExpandColumn: 'common', // column with this id will be expanded\r
-        title: 'Edit Plants?',\r
-        frame: true,\r
-        // specify the check column plugin on the grid so the plugin is initialized\r
-        plugins: checkColumn,\r
-        clicksToEdit: 1,\r
-        tbar: [{\r
-            text: 'Add Plant',\r
-            handler : function(){\r
-                // access the Record constructor through the grid's store\r
-                var Plant = grid.getStore().recordType;\r
-                var p = new Plant({\r
-                    common: 'New Plant 1',\r
-                    light: 'Mostly Shade',\r
-                    price: 0,\r
-                    availDate: (new Date()).clearTime(),\r
-                    indoor: false\r
-                });\r
-                grid.stopEditing();\r
-                store.insert(0, p);\r
-                grid.startEditing(0, 0);\r
-            }\r
-        }]\r
-    });\r
-\r
-    // manually trigger the data store load\r
-    store.load({\r
-        // store loading is asynchronous, use a load listener or callback to handle results\r
-        callback: function(){\r
-            Ext.Msg.show({\r
-                title: 'Store Load Callback',\r
-                msg: 'store was loaded, data available for processing',\r
-                modal: false,\r
-                icon: Ext.Msg.INFO,\r
-                buttons: Ext.Msg.OK\r
-            });\r
-        }\r
-    });\r
+Ext.onReady(function(){
+
+    /**
+     * Handler specified for the 'Available' column renderer
+     * @param {Object} value
+     */
+    function formatDate(value){
+        return value ? value.dateFormat('M d, Y') : '';
+    }
+
+    // shorthand alias
+    var fm = Ext.form;
+
+    // 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({
+        // specify any defaults for each column
+        defaults: {
+            sortable: true // columns are not sortable by default           
+        },
+        columns: [{
+            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 the data already specified in html
+                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'
+            })
+        }, {
+            xtype: 'checkcolumn',
+            header: 'Indoor?',
+            dataIndex: 'indoor',
+            width: 55
+        }]
+    });
+
+    // create the Data Store
+    var store = new Ext.data.Store({
+        // destroy the store if the grid is destroyed
+        autoDestroy: true,
+
+        // 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
+            fields: [
+                // 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', // column with this id will be expanded
+        title: 'Edit Plants?',
+        frame: true,
+        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);
+            }
+        }]
+    });
+
+    // manually trigger the data store load
+    store.load({
+        // store loading is asynchronous, use a load listener or callback to handle results
+        callback: function(){
+            Ext.Msg.show({
+                title: 'Store Load Callback',
+                msg: 'store was loaded, data available for processing',
+                modal: false,
+                icon: Ext.Msg.INFO,
+                buttons: Ext.Msg.OK
+            });
+        }
+    });
 });
\ No newline at end of file