3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
15 Ext.Loader.setConfig({
18 Ext.Loader.setPath('Ext.ux', '../ux');
29 Ext.onReady(function(){
30 // Define our data model
31 Ext.define('Employee', {
32 extend: 'Ext.data.Model',
36 { name: 'start', type: 'date', dateFormat: 'n/j/Y' },
37 { name: 'salary', type: 'float' },
38 { name: 'active', type: 'bool' }
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,
50 s = new Date(2007, 0, 1),
53 getRandomInt = function(min, max) {
54 return Math.floor(Math.random() * (max - min + 1)) + min;
57 generateName = function() {
58 var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
59 if (usedNames[name]) {
60 return generateName();
62 usedNames[name] = true;
66 while (s.getTime() < now.getTime()) {
67 var ecount = getRandomInt(0, 3);
68 for (var i = 0; i < ecount; i++) {
69 var name = generateName();
71 start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
73 email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
74 active: getRandomInt(0, 1),
75 salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
78 s = Ext.Date.add(s, Ext.Date.MONTH, 1);
84 // create the Data Store
85 var store = Ext.create('Ext.data.Store', {
86 // destroy the store if the grid is destroyed
99 var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
100 clicksToMoveEditor: 1,
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', {
113 // defaults to textfield if no xtype is supplied
126 header: 'Start Date',
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')
138 xtype: 'numbercolumn',
144 xtype: 'numberfield',
150 xtype: 'checkcolumn',
156 cls: 'x-grid-checkheader-editor'
159 renderTo: 'editor-grid',
162 title: 'Employee Salaries',
165 text: 'Add Employee',
166 iconCls: 'employee-add',
167 handler : function() {
168 rowEditing.cancelEdit();
170 // Create a model instance
171 var r = Ext.create('Employee', {
173 email: 'new@sencha-test.com',
180 rowEditing.startEdit(0, 0);
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) {
196 plugins: [rowEditing],
198 'selectionchange': function(view, records) {
199 grid.down('#removeEmployee').setDisabled(!records.length);