examples/grid/row-editor.js

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