Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / grid / row-editing.js

diff --git a/examples/grid/row-editing.js b/examples/grid/row-editing.js
new file mode 100644 (file)
index 0000000..f503127
--- /dev/null
+++ b/examples/grid/row-editing.js
@@ -0,0 +1,187 @@
+Ext.Loader.setConfig({
+    enabled: true
+});
+Ext.Loader.setPath('Ext.ux', '../ux');
+
+Ext.require([
+    'Ext.grid.*',
+    'Ext.data.*',
+    'Ext.util.*',
+    'Ext.state.*',
+    'Ext.form.*',
+    'Ext.ux.CheckColumn'
+]);
+
+Ext.onReady(function(){
+    // Define our data model
+    Ext.define('Employee', {
+        extend: 'Ext.data.Model',
+        fields: [
+            'name',
+            'email',
+            { name: 'start', type: 'date', dateFormat: 'n/j/Y' },
+            { name: 'salary', type: 'float' },
+            { name: 'active', type: 'bool' }
+        ]
+    });
+
+    // Generate mock employee data
+    var data = (function() {
+        var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
+            firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
+            lastLen = lasts.length,
+            firstLen = firsts.length,
+            usedNames = {},
+            data = [],
+            s = new Date(2007, 0, 1),
+            now = new Date(),
+
+            getRandomInt = function(min, max) {
+                return Math.floor(Math.random() * (max - min + 1)) + min;
+            },
+
+            generateName = function() {
+                var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
+                if (usedNames[name]) {
+                    return generateName();
+                }
+                usedNames[name] = true;
+                return name;
+            };
+
+        while (s.getTime() < now.getTime()) {
+            var ecount = getRandomInt(0, 3);
+            for (var i = 0; i < ecount; i++) {
+                var name = generateName();
+                data.push({
+                    start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
+                    name : name,
+                    email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
+                    active: getRandomInt(0, 1),
+                    salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
+                });
+            }
+            s = Ext.Date.add(s, Ext.Date.MONTH, 1);
+        }
+
+        return data;
+    })();
+
+    // create the Data Store
+    var store = Ext.create('Ext.data.Store', {
+        // destroy the store if the grid is destroyed
+        autoDestroy: true,
+        model: 'Employee',
+        proxy: {
+            type: 'memory'
+        },
+        data: data,
+        sorters: [{
+            property: 'start',
+            direction: 'ASC'
+        }]
+    });
+
+    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
+        clicksToMoveEditor: 1,
+        autoCancel: false
+    });
+
+    // create the grid and specify what field you want
+    // to use for the editor at each column.
+    var grid = Ext.create('Ext.grid.Panel', {
+        store: store,
+        columns: [{
+            header: 'Name',
+            dataIndex: 'name',
+            flex: 1,
+            editor: {
+                // defaults to textfield if no xtype is supplied
+                allowBlank: false
+            }
+        }, {
+            header: 'Email',
+            dataIndex: 'email',
+            width: 160,
+            editor: {
+                allowBlank: false,
+                vtype: 'email'
+            }
+        }, {
+            xtype: 'datecolumn',
+            header: 'Start Date',
+            dataIndex: 'start',
+            width: 90,
+            field: {
+                xtype: 'datefield',
+                allowBlank: false,
+                format: 'm/d/Y',
+                minValue: '01/01/2006',
+                minText: 'Cannot have a start date before the company existed!',
+                maxValue: Ext.Date.format(new Date(), 'm/d/Y')
+            }
+        }, {
+            xtype: 'numbercolumn',
+            header: 'Salary',
+            dataIndex: 'salary',
+            format: '$0,0',
+            width: 90,
+            editor: {
+                xtype: 'numberfield',
+                allowBlank: false,
+                minValue: 1,
+                maxValue: 150000
+            }
+        }, {
+            xtype: 'checkcolumn',
+            header: 'Active?',
+            dataIndex: 'active',
+            width: 60,
+            editor: {
+                xtype: 'checkbox',
+                cls: 'x-grid-checkheader-editor'
+            }
+        }],
+        renderTo: 'editor-grid',
+        width: 600,
+        height: 400,
+        title: 'Employee Salaries',
+        frame: true,
+        tbar: [{
+            text: 'Add Employee',
+            iconCls: 'employee-add',
+            handler : function() {
+                rowEditing.cancelEdit();
+
+                // Create a record instance through the ModelManager
+                var r = Ext.ModelManager.create({
+                    name: 'New Guy',
+                    email: 'new@sencha-test.com',
+                    start: new Date(),
+                    salary: 50000,
+                    active: true
+                }, 'Employee');
+
+                store.insert(0, r);
+                rowEditing.startEdit(0, 0);
+            }
+        }, {
+            itemId: 'removeEmployee',
+            text: 'Remove Employee',
+            iconCls: 'employee-remove',
+            handler: function() {
+                var sm = grid.getSelectionModel();
+                rowEditing.cancelEdit();
+                store.remove(sm.getSelection());
+                sm.select(0);
+            },
+            disabled: true
+        }],
+        plugins: [rowEditing],
+        listeners: {
+            'selectionchange': function(view, records) {
+                grid.down('#removeEmployee').setDisabled(!records.length);
+            }
+        }
+    });
+});