examples/grid/row-editing.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.Loader.setConfig({
  16     enabled: true
  17 });
  18 Ext.Loader.setPath('Ext.ux', '../ux');
  19
  20 Ext.require([
  21     'Ext.grid.*',
  22     'Ext.data.*',
  23     'Ext.util.*',
  24     'Ext.state.*',
  25     'Ext.form.*',
  26     'Ext.ux.CheckColumn'
  27 ]);
  28
  29 Ext.onReady(function(){
  30     // Define our data model
  31     Ext.define('Employee', {
  32         extend: 'Ext.data.Model',
  33         fields: [
  34             'name',
  35             'email',
  36             { name: 'start', type: 'date', dateFormat: 'n/j/Y' },
  37             { name: 'salary', type: 'float' },
  38             { name: 'active', type: 'bool' }
  39         ]
  40     });
  41
  42     // Generate mock employee data
  43     var data = (function() {
  44         var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
  45             firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
  46             lastLen = lasts.length,
  47             firstLen = firsts.length,
  48             usedNames = {},
  49             data = [],
  50             s = new Date(2007, 0, 1),
  51             now = new Date(),
  52
  53             getRandomInt = function(min, max) {
  54                 return Math.floor(Math.random() * (max - min + 1)) + min;
  55             },
  56
  57             generateName = function() {
  58                 var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
  59                 if (usedNames[name]) {
  60                     return generateName();
  61                 }
  62                 usedNames[name] = true;
  63                 return name;
  64             };
  65
  66         while (s.getTime() < now.getTime()) {
  67             var ecount = getRandomInt(0, 3);
  68             for (var i = 0; i < ecount; i++) {
  69                 var name = generateName();
  70                 data.push({
  71                     start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
  72                     name : name,
  73                     email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
  74                     active: getRandomInt(0, 1),
  75                     salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
  76                 });
  77             }
  78             s = Ext.Date.add(s, Ext.Date.MONTH, 1);
  79         }
  80
  81         return data;
  82     })();
  83
  84     // create the Data Store
  85     var store = Ext.create('Ext.data.Store', {
  86         // destroy the store if the grid is destroyed
  87         autoDestroy: true,
  88         model: 'Employee',
  89         proxy: {
  90             type: 'memory'
  91         },
  92         data: data,
  93         sorters: [{
  94             property: 'start',
  95             direction: 'ASC'
  96         }]
  97     });
  98
  99     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
 100         clicksToMoveEditor: 1,
 101         autoCancel: false
 102     });
 103
 104     // create the grid and specify what field you want
 105     // to use for the editor at each column.
 106     var grid = Ext.create('Ext.grid.Panel', {
 107         store: store,
 108         columns: [{
 109             header: 'Name',
 110             dataIndex: 'name',
 111             flex: 1,
 112             editor: {
 113                 // defaults to textfield if no xtype is supplied
 114                 allowBlank: false
 115             }
 116         }, {
 117             header: 'Email',
 118             dataIndex: 'email',
 119             width: 160,
 120             editor: {
 121                 allowBlank: false,
 122                 vtype: 'email'
 123             }
 124         }, {
 125             xtype: 'datecolumn',
 126             header: 'Start Date',
 127             dataIndex: 'start',
 128             width: 90,
 129             editor: {
 130                 xtype: 'datefield',
 131                 allowBlank: false,
 132                 format: 'm/d/Y',
 133                 minValue: '01/01/2006',
 134                 minText: 'Cannot have a start date before the company existed!',
 135                 maxValue: Ext.Date.format(new Date(), 'm/d/Y')
 136             }
 137         }, {
 138             xtype: 'numbercolumn',
 139             header: 'Salary',
 140             dataIndex: 'salary',
 141             format: '$0,0',
 142             width: 90,
 143             editor: {
 144                 xtype: 'numberfield',
 145                 allowBlank: false,
 146                 minValue: 1,
 147                 maxValue: 150000
 148             }
 149         }, {
 150             xtype: 'checkcolumn',
 151             header: 'Active?',
 152             dataIndex: 'active',
 153             width: 60,
 154             editor: {
 155                 xtype: 'checkbox',
 156                 cls: 'x-grid-checkheader-editor'
 157             }
 158         }],
 159         renderTo: 'editor-grid',
 160         width: 600,
 161         height: 400,
 162         title: 'Employee Salaries',
 163         frame: true,
 164         tbar: [{
 165             text: 'Add Employee',
 166             iconCls: 'employee-add',
 167             handler : function() {
 168                 rowEditing.cancelEdit();
 169
 170                 // Create a model instance
 171                 var r = Ext.create('Employee', {
 172                     name: 'New Guy',
 173                     email: 'new@sencha-test.com',
 174                     start: new Date(),
 175                     salary: 50000,
 176                     active: true
 177                 });
 178
 179                 store.insert(0, r);
 180                 rowEditing.startEdit(0, 0);
 181             }
 182         }, {
 183             itemId: 'removeEmployee',
 184             text: 'Remove Employee',
 185             iconCls: 'employee-remove',
 186             handler: function() {
 187                 var sm = grid.getSelectionModel();
 188                 rowEditing.cancelEdit();
 189                 store.remove(sm.getSelection());
 190                 if (store.getCount() > 0) {
 191                     sm.select(0);
 192                 }
 193             },
 194             disabled: true
 195         }],
 196         plugins: [rowEditing],
 197         listeners: {
 198             'selectionchange': function(view, records) {
 199                 grid.down('#removeEmployee').setDisabled(!records.length);
 200             }
 201         }
 202     });
 203 });
 204