Upgrade to ExtJS 3.0.3 - Released 10/11/2009

[extjs.git] / examples / grid / edit-grid.js

diff --git a/examples/grid/edit-grid.js b/examples/grid/edit-grid.js
index 68e6b63..9c3812e 100644 (file)
--- a/examples/grid/edit-grid.js
+++ b/examples/grid/edit-grid.js
@@ -1,19 +1,23 @@
 /*!
 /*!

- * Ext JS Library 3.0.0
+ * Ext JS Library 3.0.3

  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
 Ext.onReady(function(){\r
  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
 Ext.onReady(function(){\r

-    Ext.QuickTips.init();\r

 \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
     function formatDate(value){\r
         return value ? value.dateFormat('M d, Y') : '';\r
     }\r

+\r

     // shorthand alias\r
     var fm = Ext.form;\r
 \r
     // shorthand alias\r
     var fm = Ext.form;\r
 \r

-    // custom column plugin example\r
+    // the check column is created using a custom plugin\r

     var checkColumn = new Ext.grid.CheckColumn({\r
        header: 'Indoor?',\r
        dataIndex: 'indoor',\r
     var checkColumn = new Ext.grid.CheckColumn({\r
        header: 'Indoor?',\r
        dataIndex: 'indoor',\r


@@ -23,68 +27,74 @@ Ext.onReady(function(){
     // 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
     // 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
-           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:'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
+    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
         },\r

-        checkColumn\r
-    ]);\r
-\r
-    // by default columns are sortable\r
-    cm.defaultSortable = true;\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
 \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
         // 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
-            {\r
-                // records will have a 'plant' tag\r
-                record: 'plant'\r
-            },\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
             // use an Array of field definition objects to implicitly create a Record constructor\r

-            [\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
                 // 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


@@ -95,7 +105,7 @@ Ext.onReady(function(){
                 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
                 {name: 'indoor', type: 'bool'}\r
             ]\r
                 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
                 {name: 'indoor', type: 'bool'}\r
             ]\r

-        ),\r
+        }),\r

 \r
         sortInfo: {field:'common', direction:'ASC'}\r
     });\r
 \r
         sortInfo: {field:'common', direction:'ASC'}\r
     });\r


@@ -107,9 +117,10 @@ Ext.onReady(function(){
         renderTo: 'editor-grid',\r
         width: 600,\r
         height: 300,\r
         renderTo: 'editor-grid',\r
         width: 600,\r
         height: 300,\r

-        autoExpandColumn: 'common',\r
+        autoExpandColumn: 'common', // column with this id will be expanded\r

         title: 'Edit Plants?',\r
         frame: true,\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
         plugins: checkColumn,\r
         clicksToEdit: 1,\r
         tbar: [{\r


@@ -131,6 +142,17 @@ Ext.onReady(function(){
         }]\r
     });\r
 \r
         }]\r
     });\r
 \r

-    // trigger the data store load\r
-    store.load();\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

 });
\ No newline at end of file
 });
\ No newline at end of file