examples/grid/row-editor.js

   1 /*!
   2  * Ext JS Library 3.0.0
   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     Ext.QuickTips.init();\r
   9 \r
  10     var Employee = Ext.data.Record.create([{\r
  11         name: 'name',\r
  12         type: 'string'\r
  13     }, {\r
  14         name: 'email',\r
  15         type: 'string'\r
  16     }, {\r
  17         name: 'start',\r
  18         type: 'date',\r
  19         dateFormat: 'n/j/Y'\r
  20     },{\r
  21         name: 'salary',\r
  22         type: 'float'\r
  23     },{\r
  24         name: 'active',\r
  25         type: 'bool'\r
  26     }]);\r
  27 \r
  28 \r
  29     // hideous function to generate employee data\r
  30     var genData = function(){\r
  31         var data = [];\r
  32         var s = new Date(2007, 0, 1);\r
  33         var now = new Date(), i = -1;\r
  34         while(s.getTime() < now.getTime()){\r
  35             var ecount = Ext.ux.getRandomInt(0, 3);\r
  36             for(var i = 0; i < ecount; i++){\r
  37                 var name = Ext.ux.generateName();\r
  38                 data.push({\r
  39                     start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),\r
  40                     name : name,\r
  41                     email: name.toLowerCase().replace(' ', '.') + '@exttest.com',\r
  42                     active: true,\r
  43                     salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000\r
  44                 });\r
  45             }\r
  46             s = s.add(Date.MONTH, 1);\r
  47         }\r
  48         return data;\r
  49     }\r
  50 \r
  51 \r
  52     var store = new Ext.data.GroupingStore({\r
  53         reader: new Ext.data.JsonReader({fields: Employee}),\r
  54         data: genData(),\r
  55         sortInfo: {field: 'start', direction: 'ASC'}\r
  56     });\r
  57 \r
  58     var editor = new Ext.ux.grid.RowEditor({\r
  59         saveText: 'Update'\r
  60     });\r
  61 \r
  62     var grid = new Ext.grid.GridPanel({\r
  63         store: store,\r
  64         width: 600,\r
  65         region:'center',\r
  66         margins: '0 5 5 5',\r
  67         autoExpandColumn: 'name',\r
  68         plugins: [editor],\r
  69         view: new Ext.grid.GroupingView({\r
  70             markDirty: false\r
  71         }),\r
  72         tbar: [{\r
  73             iconCls: 'icon-user-add',\r
  74             text: 'Add Employee',\r
  75             handler: function(){\r
  76                 var e = new Employee({\r
  77                     name: 'New Guy',\r
  78                     email: 'new@exttest.com',\r
  79                     start: (new Date()).clearTime(),\r
  80                     salary: 50000,\r
  81                     active: true\r
  82                 });\r
  83                 editor.stopEditing();\r
  84                 store.insert(0, e);\r
  85                 grid.getView().refresh();\r
  86                 grid.getSelectionModel().selectRow(0);\r
  87                 editor.startEditing(0);\r
  88             }\r
  89         },{\r
  90             ref: '../removeBtn',\r
  91             iconCls: 'icon-user-delete',\r
  92             text: 'Remove Employee',\r
  93             disabled: true,\r
  94             handler: function(){\r
  95                 editor.stopEditing();\r
  96                 var s = grid.getSelectionModel().getSelections();\r
  97                 for(var i = 0, r; r = s[i]; i++){\r
  98                     store.remove(r);\r
  99                 }\r
 100             }\r
 101         }],\r
 102 \r
 103         columns: [\r
 104         new Ext.grid.RowNumberer(),\r
 105         {\r
 106             id: 'name',\r
 107             header: 'First Name',\r
 108             dataIndex: 'name',\r
 109             width: 220,\r
 110             sortable: true,\r
 111             editor: {\r
 112                 xtype: 'textfield',\r
 113                 allowBlank: false\r
 114             }\r
 115         },{\r
 116             header: 'Email',\r
 117             dataIndex: 'email',\r
 118             width: 150,\r
 119             sortable: true,\r
 120             editor: {\r
 121                 xtype: 'textfield',\r
 122                 allowBlank: false,\r
 123                 vtype: 'email'\r
 124             }\r
 125         },{\r
 126             xtype: 'datecolumn',\r
 127             header: 'Start Date',\r
 128             dataIndex: 'start',\r
 129             format: 'm/d/Y',\r
 130             width: 100,\r
 131             sortable: true,\r
 132             groupRenderer: Ext.util.Format.dateRenderer('M y'),\r
 133             editor: {\r
 134                 xtype: 'datefield',\r
 135                 allowBlank: false,\r
 136                 minValue: '01/01/2006',\r
 137                 minText: 'Can\'t have a start date before the company existed!',\r
 138                 maxValue: (new Date()).format('m/d/Y')\r
 139             }\r
 140         },{\r
 141             xtype: 'numbercolumn',\r
 142             header: 'Salary',\r
 143             dataIndex: 'salary',\r
 144             format: '$0,0.00',\r
 145             width: 100,\r
 146             sortable: true,\r
 147             editor: {\r
 148                 xtype: 'numberfield',\r
 149                 allowBlank: false,\r
 150                 minValue: 1,\r
 151                 maxValue: 150000\r
 152             }\r
 153         },{\r
 154             xtype: 'booleancolumn',\r
 155             header: 'Active',\r
 156             dataIndex: 'active',\r
 157             align: 'center',\r
 158             width: 50,\r
 159             trueText: 'Yes',\r
 160             falseText: 'No',\r
 161             editor: {\r
 162                 xtype: 'checkbox'\r
 163             }\r
 164         }]\r
 165     });\r
 166 \r
 167     var cstore = new Ext.data.JsonStore({\r
 168         fields:['month', 'employees', 'salary'],\r
 169         data:[],\r
 170         refreshData: function(){\r
 171             var o = {}, data = [];\r
 172             var s = new Date(2007, 0, 1);\r
 173             var now = new Date(), i = -1;\r
 174             while(s.getTime() < now.getTime()){\r
 175                 var m = {\r
 176                     month: s.format('M y'),\r
 177                     employees: 0,\r
 178                     salary: 0,\r
 179                     index: ++i\r
 180                 }\r
 181                 data.push(m);\r
 182                 o[m.month] = m;\r
 183                 s = s.add(Date.MONTH, 1);\r
 184             }\r
 185             store.each(function(r){\r
 186                 var m = o[r.data.start.format('M y')];\r
 187                 for(var i = m.index, mo; mo = data[i]; i++){\r
 188                     mo.employees += 10000;\r
 189                     mo.salary += r.data.salary;\r
 190                 }\r
 191             });\r
 192             this.loadData(data);\r
 193         }\r
 194     });\r
 195     cstore.refreshData();\r
 196     store.on('add', cstore.refreshData, cstore);\r
 197     store.on('remove', cstore.refreshData, cstore);\r
 198     store.on('update', cstore.refreshData, cstore);\r
 199 \r
 200     var chart = new Ext.Panel({\r
 201         width:600,\r
 202         height:200,\r
 203         layout:'fit',\r
 204         margins: '5 5 0',\r
 205         region: 'north',\r
 206         split: true,\r
 207         minHeight: 100,\r
 208         maxHeight: 500,\r
 209 \r
 210         items: {\r
 211             xtype: 'columnchart',\r
 212             store: cstore,\r
 213             url:'../../resources/charts.swf',\r
 214             xField: 'month',\r
 215             yAxis: new Ext.chart.NumericAxis({\r
 216                 displayName: 'Employees',\r
 217                 labelRenderer : Ext.util.Format.numberRenderer('0,0')\r
 218             }),\r
 219             tipRenderer : function(chart, record, index, series){\r
 220                 if(series.yField == 'salary'){\r
 221                     return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;\r
 222                 }else{\r
 223                     return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;\r
 224                 }\r
 225             },\r
 226 \r
 227             // style chart so it looks pretty\r
 228             chartStyle: {\r
 229                 padding: 10,\r
 230                 animationEnabled: true,\r
 231                 font: {\r
 232                     name: 'Tahoma',\r
 233                     color: 0x444444,\r
 234                     size: 11\r
 235                 },\r
 236                 dataTip: {\r
 237                     padding: 5,\r
 238                     border: {\r
 239                         color: 0x99bbe8,\r
 240                         size:1\r
 241                     },\r
 242                     background: {\r
 243                         color: 0xDAE7F6,\r
 244                         alpha: .9\r
 245                     },\r
 246                     font: {\r
 247                         name: 'Tahoma',\r
 248                         color: 0x15428B,\r
 249                         size: 10,\r
 250                         bold: true\r
 251                     }\r
 252                 },\r
 253                 xAxis: {\r
 254                     color: 0x69aBc8,\r
 255                     majorTicks: {color: 0x69aBc8, length: 4},\r
 256                     minorTicks: {color: 0x69aBc8, length: 2},\r
 257                     majorGridLines: {size: 1, color: 0xeeeeee}\r
 258                 },\r
 259                 yAxis: {\r
 260                     color: 0x69aBc8,\r
 261                     majorTicks: {color: 0x69aBc8, length: 4},\r
 262                     minorTicks: {color: 0x69aBc8, length: 2},\r
 263                     majorGridLines: {size: 1, color: 0xdfe8f6}\r
 264                 }\r
 265             },\r
 266             series: [{\r
 267                 type: 'column',\r
 268                 displayName: 'Salary',\r
 269                 yField: 'salary',\r
 270                 style: {\r
 271                     image:'../chart/bar.gif',\r
 272                     mode: 'stretch',\r
 273                     color:0x99BBE8\r
 274                 }\r
 275             }]\r
 276         }\r
 277     });\r
 278 \r
 279 \r
 280     var layout = new Ext.Panel({\r
 281         title: 'Employee Salary by Month',\r
 282         layout: 'border',\r
 283         layoutConfig: {\r
 284             columns: 1\r
 285         },\r
 286         width:600,\r
 287         height: 600,\r
 288         items: [chart, grid]\r
 289     });\r
 290     layout.render(Ext.getBody());\r
 291 \r
 292     grid.getSelectionModel().on('selectionchange', function(sm){\r
 293         grid.removeBtn.setDisabled(sm.getCount() < 1);\r
 294     });\r
 295 });\r