examples/grid/edit-grid.js

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