row-editor.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:9k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){
  2.     Ext.QuickTips.init();
  3.     var Employee = Ext.data.Record.create([{
  4.         name: 'name',
  5.         type: 'string'
  6.     }, {
  7.         name: 'email',
  8.         type: 'string'
  9.     }, {
  10.         name: 'start',
  11.         type: 'date',
  12.         dateFormat: 'n/j/Y'
  13.     },{
  14.         name: 'salary',
  15.         type: 'float'
  16.     },{
  17.         name: 'active',
  18.         type: 'bool'
  19.     }]);
  20.     // hideous function to generate employee data
  21.     var genData = function(){
  22.         var data = [];
  23.         var s = new Date(2007, 0, 1);
  24.         var now = new Date(), i = -1;
  25.         while(s.getTime() < now.getTime()){
  26.             var ecount = Ext.ux.getRandomInt(0, 3);
  27.             for(var i = 0; i < ecount; i++){
  28.                 var name = Ext.ux.generateName();
  29.                 data.push({
  30.                     start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
  31.                     name : name,
  32.                     email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
  33.                     active: true,
  34.                     salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
  35.                 });
  36.             }
  37.             s = s.add(Date.MONTH, 1);
  38.         }
  39.         return data;
  40.     }
  41.     var store = new Ext.data.GroupingStore({
  42.         reader: new Ext.data.JsonReader({fields: Employee}),
  43.         data: genData(),
  44.         sortInfo: {field: 'start', direction: 'ASC'}
  45.     });
  46.     var editor = new Ext.ux.grid.RowEditor({
  47.         saveText: 'Update'
  48.     });
  49.     var grid = new Ext.grid.GridPanel({
  50.         store: store,
  51.         width: 600,
  52.         region:'center',
  53.         margins: '0 5 5 5',
  54.         autoExpandColumn: 'name',
  55.         plugins: [editor],
  56.         view: new Ext.grid.GroupingView({
  57.             markDirty: false
  58.         }),
  59.         tbar: [{
  60.             iconCls: 'icon-user-add',
  61.             text: 'Add Employee',
  62.             handler: function(){
  63.                 var e = new Employee({
  64.                     name: 'New Guy',
  65.                     email: 'new@exttest.com',
  66.                     start: (new Date()).clearTime(),
  67.                     salary: 50000,
  68.                     active: true
  69.                 });
  70.                 editor.stopEditing();
  71.                 store.insert(0, e);
  72.                 grid.getView().refresh();
  73.                 grid.getSelectionModel().selectRow(0);
  74.                 editor.startEditing(0);
  75.             }
  76.         },{
  77.             ref: '../removeBtn',
  78.             iconCls: 'icon-user-delete',
  79.             text: 'Remove Employee',
  80.             disabled: true,
  81.             handler: function(){
  82.                 editor.stopEditing();
  83.                 var s = grid.getSelectionModel().getSelections();
  84.                 for(var i = 0, r; r = s[i]; i++){
  85.                     store.remove(r);
  86.                 }
  87.             }
  88.         }],
  89.         columns: [
  90.         new Ext.grid.RowNumberer(),
  91.         {
  92.             id: 'name',
  93.             header: 'First Name',
  94.             dataIndex: 'name',
  95.             width: 220,
  96.             sortable: true,
  97.             editor: {
  98.                 xtype: 'textfield',
  99.                 allowBlank: false
  100.             }
  101.         },{
  102.             header: 'Email',
  103.             dataIndex: 'email',
  104.             width: 150,
  105.             sortable: true,
  106.             editor: {
  107.                 xtype: 'textfield',
  108.                 allowBlank: false,
  109.                 vtype: 'email'
  110.             }
  111.         },{
  112.             xtype: 'datecolumn',
  113.             header: 'Start Date',
  114.             dataIndex: 'start',
  115.             format: 'm/d/Y',
  116.             width: 100,
  117.             sortable: true,
  118.             groupRenderer: Ext.util.Format.dateRenderer('M y'),
  119.             editor: {
  120.                 xtype: 'datefield',
  121.                 allowBlank: false,
  122.                 minValue: '01/01/2006',
  123.                 minText: 'Can't have a start date before the company existed!',
  124.                 maxValue: (new Date()).format('m/d/Y')
  125.             }
  126.         },{
  127.             xtype: 'numbercolumn',
  128.             header: 'Salary',
  129.             dataIndex: 'salary',
  130.             format: '$0,0.00',
  131.             width: 100,
  132.             sortable: true,
  133.             editor: {
  134.                 xtype: 'numberfield',
  135.                 allowBlank: false,
  136.                 minValue: 1,
  137.                 maxValue: 150000
  138.             }
  139.         },{
  140.             xtype: 'booleancolumn',
  141.             header: 'Active',
  142.             dataIndex: 'active',
  143.             align: 'center',
  144.             width: 50,
  145.             trueText: 'Yes',
  146.             falseText: 'No',
  147.             editor: {
  148.                 xtype: 'checkbox'
  149.             }
  150.         }]
  151.     });
  152.     var cstore = new Ext.data.JsonStore({
  153.         fields:['month', 'employees', 'salary'],
  154.         data:[],
  155.         refreshData: function(){
  156.             var o = {}, data = [];
  157.             var s = new Date(2007, 0, 1);
  158.             var now = new Date(), i = -1;
  159.             while(s.getTime() < now.getTime()){
  160.                 var m = {
  161.                     month: s.format('M y'),
  162.                     employees: 0,
  163.                     salary: 0,
  164.                     index: ++i
  165.                 }
  166.                 data.push(m);
  167.                 o[m.month] = m;
  168.                 s = s.add(Date.MONTH, 1);
  169.             }
  170.             store.each(function(r){
  171.                 var m = o[r.data.start.format('M y')];
  172.                 for(var i = m.index, mo; mo = data[i]; i++){
  173.                     mo.employees += 10000;
  174.                     mo.salary += r.data.salary;
  175.                 }
  176.             });
  177.             this.loadData(data);
  178.         }
  179.     });
  180.     cstore.refreshData();
  181.     store.on('add', cstore.refreshData, cstore);
  182.     store.on('remove', cstore.refreshData, cstore);
  183.     store.on('update', cstore.refreshData, cstore);
  184.     var chart = new Ext.Panel({
  185.         width:600,
  186.         height:200,
  187.         layout:'fit',
  188.         margins: '5 5 0',
  189.         region: 'north',
  190.         split: true,
  191.         minHeight: 100,
  192.         maxHeight: 500,
  193.         items: {
  194.             xtype: 'columnchart',
  195.             store: cstore,
  196.             url:'../../resources/charts.swf',
  197.             xField: 'month',
  198.             yAxis: new Ext.chart.NumericAxis({
  199.                 displayName: 'Employees',
  200.                 labelRenderer : Ext.util.Format.numberRenderer('0,0')
  201.             }),
  202.             tipRenderer : function(chart, record, index, series){
  203.                 if(series.yField == 'salary'){
  204.                     return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;
  205.                 }else{
  206.                     return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
  207.                 }
  208.             },
  209.             // style chart so it looks pretty
  210.             chartStyle: {
  211.                 padding: 10,
  212.                 animationEnabled: true,
  213.                 font: {
  214.                     name: 'Tahoma',
  215.                     color: 0x444444,
  216.                     size: 11
  217.                 },
  218.                 dataTip: {
  219.                     padding: 5,
  220.                     border: {
  221.                         color: 0x99bbe8,
  222.                         size:1
  223.                     },
  224.                     background: {
  225.                         color: 0xDAE7F6,
  226.                         alpha: .9
  227.                     },
  228.                     font: {
  229.                         name: 'Tahoma',
  230.                         color: 0x15428B,
  231.                         size: 10,
  232.                         bold: true
  233.                     }
  234.                 },
  235.                 xAxis: {
  236.                     color: 0x69aBc8,
  237.                     majorTicks: {color: 0x69aBc8, length: 4},
  238.                     minorTicks: {color: 0x69aBc8, length: 2},
  239.                     majorGridLines: {size: 1, color: 0xeeeeee}
  240.                 },
  241.                 yAxis: {
  242.                     color: 0x69aBc8,
  243.                     majorTicks: {color: 0x69aBc8, length: 4},
  244.                     minorTicks: {color: 0x69aBc8, length: 2},
  245.                     majorGridLines: {size: 1, color: 0xdfe8f6}
  246.                 }
  247.             },
  248.             series: [{
  249.                 type: 'column',
  250.                 displayName: 'Salary',
  251.                 yField: 'salary',
  252.                 style: {
  253.                     image:'../chart/bar.gif',
  254.                     mode: 'stretch',
  255.                     color:0x99BBE8
  256.                 }
  257.             }]
  258.         }
  259.     });
  260.     var layout = new Ext.Panel({
  261.         title: 'Employee Salary by Month',
  262.         layout: 'border',
  263.         layoutConfig: {
  264.             columns: 1
  265.         },
  266.         width:600,
  267.         height: 600,
  268.         items: [chart, grid]
  269.     });
  270.     layout.render(Ext.getBody());
  271.     grid.getSelectionModel().on('selectionchange', function(sm){
  272.         grid.removeBtn.setDisabled(sm.getCount() < 1);
  273.     });
  274. });