/*!
- * 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);
+ });
+});
git.ithinksw.org / extjs.git / blobdiff