+++ /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