--- /dev/null
+<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
git.ithinksw.org / extjs.git / blobdiff