docs/source/row-editor.html

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