examples/grid/row-editing.js

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