Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / row-editor.html
diff --git a/docs/source/row-editor.html b/docs/source/row-editor.html
new file mode 100644 (file)
index 0000000..7e40801
--- /dev/null
@@ -0,0 +1,299 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">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
+</pre>    \r
+</body>\r
+</html>
\ No newline at end of file