Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / grid / row-editor.js
index df9dc43..5763fdd 100644 (file)
 /*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
-Ext.onReady(function(){\r
-    Ext.QuickTips.init();\r
-\r
-    var Employee = Ext.data.Record.create([{\r
-        name: 'name',\r
-        type: 'string'\r
-    }, {\r
-        name: 'email',\r
-        type: 'string'\r
-    }, {\r
-        name: 'start',\r
-        type: 'date',\r
-        dateFormat: 'n/j/Y'\r
-    },{\r
-        name: 'salary',\r
-        type: 'float'\r
-    },{\r
-        name: 'active',\r
-        type: 'bool'\r
-    }]);\r
-\r
-\r
-    // hideous function to generate employee data\r
-    var genData = function(){\r
-        var data = [];\r
-        var s = new Date(2007, 0, 1);\r
-        var now = new Date(), i = -1;\r
-        while(s.getTime() < now.getTime()){\r
-            var ecount = Ext.ux.getRandomInt(0, 3);\r
-            for(var i = 0; i < ecount; i++){\r
-                var name = Ext.ux.generateName();\r
-                data.push({\r
-                    start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),\r
-                    name : name,\r
-                    email: name.toLowerCase().replace(' ', '.') + '@exttest.com',\r
-                    active: true,\r
-                    salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000\r
-                });\r
-            }\r
-            s = s.add(Date.MONTH, 1);\r
-        }\r
-        return data;\r
-    }\r
-\r
-\r
-    var store = new Ext.data.GroupingStore({\r
-        reader: new Ext.data.JsonReader({fields: Employee}),\r
-        data: genData(),\r
-        sortInfo: {field: 'start', direction: 'ASC'}\r
-    });\r
-\r
-    var editor = new Ext.ux.grid.RowEditor({\r
-        saveText: 'Update'\r
-    });\r
-\r
-    var grid = new Ext.grid.GridPanel({\r
-        store: store,\r
-        width: 600,\r
-        region:'center',\r
-        margins: '0 5 5 5',\r
-        autoExpandColumn: 'name',\r
-        plugins: [editor],\r
-        view: new Ext.grid.GroupingView({\r
-            markDirty: false\r
-        }),\r
-        tbar: [{\r
-            iconCls: 'icon-user-add',\r
-            text: 'Add Employee',\r
-            handler: function(){\r
-                var e = new Employee({\r
-                    name: 'New Guy',\r
-                    email: 'new@exttest.com',\r
-                    start: (new Date()).clearTime(),\r
-                    salary: 50000,\r
-                    active: true\r
-                });\r
-                editor.stopEditing();\r
-                store.insert(0, e);\r
-                grid.getView().refresh();\r
-                grid.getSelectionModel().selectRow(0);\r
-                editor.startEditing(0);\r
-            }\r
-        },{\r
-            ref: '../removeBtn',\r
-            iconCls: 'icon-user-delete',\r
-            text: 'Remove Employee',\r
-            disabled: true,\r
-            handler: function(){\r
-                editor.stopEditing();\r
-                var s = grid.getSelectionModel().getSelections();\r
-                for(var i = 0, r; r = s[i]; i++){\r
-                    store.remove(r);\r
-                }\r
-            }\r
-        }],\r
-\r
-        columns: [\r
-        new Ext.grid.RowNumberer(),\r
-        {\r
-            id: 'name',\r
-            header: 'First Name',\r
-            dataIndex: 'name',\r
-            width: 220,\r
-            sortable: true,\r
-            editor: {\r
-                xtype: 'textfield',\r
-                allowBlank: false\r
-            }\r
-        },{\r
-            header: 'Email',\r
-            dataIndex: 'email',\r
-            width: 150,\r
-            sortable: true,\r
-            editor: {\r
-                xtype: 'textfield',\r
-                allowBlank: false,\r
-                vtype: 'email'\r
-            }\r
-        },{\r
-            xtype: 'datecolumn',\r
-            header: 'Start Date',\r
-            dataIndex: 'start',\r
-            format: 'm/d/Y',\r
-            width: 100,\r
-            sortable: true,\r
-            groupRenderer: Ext.util.Format.dateRenderer('M y'),\r
-            editor: {\r
-                xtype: 'datefield',\r
-                allowBlank: false,\r
-                minValue: '01/01/2006',\r
-                minText: 'Can\'t have a start date before the company existed!',\r
-                maxValue: (new Date()).format('m/d/Y')\r
-            }\r
-        },{\r
-            xtype: 'numbercolumn',\r
-            header: 'Salary',\r
-            dataIndex: 'salary',\r
-            format: '$0,0.00',\r
-            width: 100,\r
-            sortable: true,\r
-            editor: {\r
-                xtype: 'numberfield',\r
-                allowBlank: false,\r
-                minValue: 1,\r
-                maxValue: 150000\r
-            }\r
-        },{\r
-            xtype: 'booleancolumn',\r
-            header: 'Active',\r
-            dataIndex: 'active',\r
-            align: 'center',\r
-            width: 50,\r
-            trueText: 'Yes',\r
-            falseText: 'No',\r
-            editor: {\r
-                xtype: 'checkbox'\r
-            }\r
-        }]\r
-    });\r
-\r
-    var cstore = new Ext.data.JsonStore({\r
-        fields:['month', 'employees', 'salary'],\r
-        data:[],\r
-        refreshData: function(){\r
-            var o = {}, data = [];\r
-            var s = new Date(2007, 0, 1);\r
-            var now = new Date(), i = -1;\r
-            while(s.getTime() < now.getTime()){\r
-                var m = {\r
-                    month: s.format('M y'),\r
-                    employees: 0,\r
-                    salary: 0,\r
-                    index: ++i\r
-                }\r
-                data.push(m);\r
-                o[m.month] = m;\r
-                s = s.add(Date.MONTH, 1);\r
-            }\r
-            store.each(function(r){\r
-                var m = o[r.data.start.format('M y')];\r
-                for(var i = m.index, mo; mo = data[i]; i++){\r
-                    mo.employees += 10000;\r
-                    mo.salary += r.data.salary;\r
-                }\r
-            });\r
-            this.loadData(data);\r
-        }\r
-    });\r
-    cstore.refreshData();\r
-    store.on('add', cstore.refreshData, cstore);\r
-    store.on('remove', cstore.refreshData, cstore);\r
-    store.on('update', cstore.refreshData, cstore);\r
-\r
-    var chart = new Ext.Panel({\r
-        width:600,\r
-        height:200,\r
-        layout:'fit',\r
-        margins: '5 5 0',\r
-        region: 'north',\r
-        split: true,\r
-        minHeight: 100,\r
-        maxHeight: 500,\r
-\r
-        items: {\r
-            xtype: 'columnchart',\r
-            store: cstore,\r
-            url:'../../resources/charts.swf',\r
-            xField: 'month',\r
-            yAxis: new Ext.chart.NumericAxis({\r
-                displayName: 'Employees',\r
-                labelRenderer : Ext.util.Format.numberRenderer('0,0')\r
-            }),\r
-            tipRenderer : function(chart, record, index, series){\r
-                if(series.yField == 'salary'){\r
-                    return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;\r
-                }else{\r
-                    return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;\r
-                }\r
-            },\r
-\r
-            // style chart so it looks pretty\r
-            chartStyle: {\r
-                padding: 10,\r
-                animationEnabled: true,\r
-                font: {\r
-                    name: 'Tahoma',\r
-                    color: 0x444444,\r
-                    size: 11\r
-                },\r
-                dataTip: {\r
-                    padding: 5,\r
-                    border: {\r
-                        color: 0x99bbe8,\r
-                        size:1\r
-                    },\r
-                    background: {\r
-                        color: 0xDAE7F6,\r
-                        alpha: .9\r
-                    },\r
-                    font: {\r
-                        name: 'Tahoma',\r
-                        color: 0x15428B,\r
-                        size: 10,\r
-                        bold: true\r
-                    }\r
-                },\r
-                xAxis: {\r
-                    color: 0x69aBc8,\r
-                    majorTicks: {color: 0x69aBc8, length: 4},\r
-                    minorTicks: {color: 0x69aBc8, length: 2},\r
-                    majorGridLines: {size: 1, color: 0xeeeeee}\r
-                },\r
-                yAxis: {\r
-                    color: 0x69aBc8,\r
-                    majorTicks: {color: 0x69aBc8, length: 4},\r
-                    minorTicks: {color: 0x69aBc8, length: 2},\r
-                    majorGridLines: {size: 1, color: 0xdfe8f6}\r
-                }\r
-            },\r
-            series: [{\r
-                type: 'column',\r
-                displayName: 'Salary',\r
-                yField: 'salary',\r
-                style: {\r
-                    image:'../chart/bar.gif',\r
-                    mode: 'stretch',\r
-                    color:0x99BBE8\r
-                }\r
-            }]\r
-        }\r
-    });\r
-\r
-\r
-    var layout = new Ext.Panel({\r
-        title: 'Employee Salary by Month',\r
-        layout: 'border',\r
-        layoutConfig: {\r
-            columns: 1\r
-        },\r
-        width:600,\r
-        height: 600,\r
-        items: [chart, grid]\r
-    });\r
-    layout.render(Ext.getBody());\r
-\r
-    grid.getSelectionModel().on('selectionchange', function(sm){\r
-        grid.removeBtn.setDisabled(sm.getCount() < 1);\r
-    });\r
-});\r
+Ext.onReady(function(){
+    Ext.QuickTips.init();
+
+    var Employee = Ext.data.Record.create([{
+        name: 'name',
+        type: 'string'
+    }, {
+        name: 'email',
+        type: 'string'
+    }, {
+        name: 'start',
+        type: 'date',
+        dateFormat: 'n/j/Y'
+    },{
+        name: 'salary',
+        type: 'float'
+    },{
+        name: 'active',
+        type: 'bool'
+    }]);
+
+
+    // hideous function to generate employee data
+    var genData = function(){
+        var data = [];
+        var s = new Date(2007, 0, 1);
+        var now = new Date(), i = -1;
+        while(s.getTime() < now.getTime()){
+            var ecount = Ext.ux.getRandomInt(0, 3);
+            for(var i = 0; i < ecount; i++){
+                var name = Ext.ux.generateName();
+                data.push({
+                    start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
+                    name : name,
+                    email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
+                    active: true,
+                    salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
+                });
+            }
+            s = s.add(Date.MONTH, 1);
+        }
+        return data;
+    }
+
+
+    var store = new Ext.data.GroupingStore({
+        reader: new Ext.data.JsonReader({fields: Employee}),
+        data: genData(),
+        sortInfo: {field: 'start', direction: 'ASC'}
+    });
+
+    var editor = new Ext.ux.grid.RowEditor({
+        saveText: 'Update'
+    });
+
+    var grid = new Ext.grid.GridPanel({
+        store: store,
+        width: 600,
+        region:'center',
+        margins: '0 5 5 5',
+        autoExpandColumn: 'name',
+        plugins: [editor],
+        view: new Ext.grid.GroupingView({
+            markDirty: false
+        }),
+        tbar: [{
+            iconCls: 'icon-user-add',
+            text: 'Add Employee',
+            handler: function(){
+                var e = new Employee({
+                    name: 'New Guy',
+                    email: 'new@exttest.com',
+                    start: (new Date()).clearTime(),
+                    salary: 50000,
+                    active: true
+                });
+                editor.stopEditing();
+                store.insert(0, e);
+                grid.getView().refresh();
+                grid.getSelectionModel().selectRow(0);
+                editor.startEditing(0);
+            }
+        },{
+            ref: '../removeBtn',
+            iconCls: 'icon-user-delete',
+            text: 'Remove Employee',
+            disabled: true,
+            handler: function(){
+                editor.stopEditing();
+                var s = grid.getSelectionModel().getSelections();
+                for(var i = 0, r; r = s[i]; i++){
+                    store.remove(r);
+                }
+            }
+        }],
+
+        columns: [
+        new Ext.grid.RowNumberer(),
+        {
+            id: 'name',
+            header: 'First Name',
+            dataIndex: 'name',
+            width: 220,
+            sortable: true,
+            editor: {
+                xtype: 'textfield',
+                allowBlank: false
+            }
+        },{
+            header: 'Email',
+            dataIndex: 'email',
+            width: 150,
+            sortable: true,
+            editor: {
+                xtype: 'textfield',
+                allowBlank: false,
+                vtype: 'email'
+            }
+        },{
+            xtype: 'datecolumn',
+            header: 'Start Date',
+            dataIndex: 'start',
+            format: 'm/d/Y',
+            width: 100,
+            sortable: true,
+            groupRenderer: Ext.util.Format.dateRenderer('M y'),
+            editor: {
+                xtype: 'datefield',
+                allowBlank: false,
+                minValue: '01/01/2006',
+                minText: 'Can\'t have a start date before the company existed!',
+                maxValue: (new Date()).format('m/d/Y')
+            }
+        },{
+            xtype: 'numbercolumn',
+            header: 'Salary',
+            dataIndex: 'salary',
+            format: '$0,0.00',
+            width: 100,
+            sortable: true,
+            editor: {
+                xtype: 'numberfield',
+                allowBlank: false,
+                minValue: 1,
+                maxValue: 150000
+            }
+        },{
+            xtype: 'booleancolumn',
+            header: 'Active',
+            dataIndex: 'active',
+            align: 'center',
+            width: 50,
+            trueText: 'Yes',
+            falseText: 'No',
+            editor: {
+                xtype: 'checkbox'
+            }
+        }]
+    });
+
+    var cstore = new Ext.data.JsonStore({
+        fields:['month', 'employees', 'salary'],
+        data:[],
+        refreshData: function(){
+            var o = {}, data = [];
+            var s = new Date(2007, 0, 1);
+            var now = new Date(), i = -1;
+            while(s.getTime() < now.getTime()){
+                var m = {
+                    month: s.format('M y'),
+                    employees: 0,
+                    salary: 0,
+                    index: ++i
+                }
+                data.push(m);
+                o[m.month] = m;
+                s = s.add(Date.MONTH, 1);
+            }
+            store.each(function(r){
+                var m = o[r.data.start.format('M y')];
+                for(var i = m.index, mo; mo = data[i]; i++){
+                    mo.employees += 10000;
+                    mo.salary += r.data.salary;
+                }
+            });
+            this.loadData(data);
+        }
+    });
+    cstore.refreshData();
+    store.on('add', cstore.refreshData, cstore);
+    store.on('remove', cstore.refreshData, cstore);
+    store.on('update', cstore.refreshData, cstore);
+
+    var chart = new Ext.Panel({
+        width:600,
+        height:200,
+        layout:'fit',
+        margins: '5 5 0',
+        region: 'north',
+        split: true,
+        minHeight: 100,
+        maxHeight: 500,
+
+        items: {
+            xtype: 'columnchart',
+            store: cstore,
+            url:'../../resources/charts.swf',
+            xField: 'month',
+            yAxis: new Ext.chart.NumericAxis({
+                displayName: 'Employees',
+                labelRenderer : Ext.util.Format.numberRenderer('0,0')
+            }),
+            tipRenderer : function(chart, record, index, series){
+                if(series.yField == 'salary'){
+                    return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;
+                }else{
+                    return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
+                }
+            },
+
+            // style chart so it looks pretty
+            chartStyle: {
+                padding: 10,
+                animationEnabled: true,
+                font: {
+                    name: 'Tahoma',
+                    color: 0x444444,
+                    size: 11
+                },
+                dataTip: {
+                    padding: 5,
+                    border: {
+                        color: 0x99bbe8,
+                        size:1
+                    },
+                    background: {
+                        color: 0xDAE7F6,
+                        alpha: .9
+                    },
+                    font: {
+                        name: 'Tahoma',
+                        color: 0x15428B,
+                        size: 10,
+                        bold: true
+                    }
+                },
+                xAxis: {
+                    color: 0x69aBc8,
+                    majorTicks: {color: 0x69aBc8, length: 4},
+                    minorTicks: {color: 0x69aBc8, length: 2},
+                    majorGridLines: {size: 1, color: 0xeeeeee}
+                },
+                yAxis: {
+                    color: 0x69aBc8,
+                    majorTicks: {color: 0x69aBc8, length: 4},
+                    minorTicks: {color: 0x69aBc8, length: 2},
+                    majorGridLines: {size: 1, color: 0xdfe8f6}
+                }
+            },
+            series: [{
+                type: 'column',
+                displayName: 'Salary',
+                yField: 'salary',
+                style: {
+                    image:'../chart/bar.gif',
+                    mode: 'stretch',
+                    color:0x99BBE8
+                }
+            }]
+        }
+    });
+
+
+    var layout = new Ext.Panel({
+        title: 'Employee Salary by Month',
+        layout: 'border',
+        layoutConfig: {
+            columns: 1
+        },
+        width:600,
+        height: 600,
+        items: [chart, grid]
+    });
+    layout.render(Ext.getBody());
+
+    grid.getSelectionModel().on('selectionchange', function(sm){
+        grid.removeBtn.setDisabled(sm.getCount() < 1);
+    });
+});