[625] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.0.0 |
---|
| 3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
| 4 | * licensing@extjs.com |
---|
| 5 | * http://www.extjs.com/license |
---|
| 6 | */ |
---|
| 7 | Ext.onReady(function(){ |
---|
| 8 | |
---|
| 9 | Ext.QuickTips.init(); |
---|
| 10 | |
---|
| 11 | var xg = Ext.grid; |
---|
| 12 | |
---|
| 13 | var reader = new Ext.data.JsonReader({ |
---|
| 14 | idProperty: 'taskId', |
---|
| 15 | fields: [ |
---|
| 16 | {name: 'projectId', type: 'int'}, |
---|
| 17 | {name: 'project', type: 'string'}, |
---|
| 18 | {name: 'taskId', type: 'int'}, |
---|
| 19 | {name: 'description', type: 'string'}, |
---|
| 20 | {name: 'estimate', type: 'float'}, |
---|
| 21 | {name: 'rate', type: 'float'}, |
---|
| 22 | {name: 'cost', type: 'float'}, |
---|
| 23 | {name: 'due', type: 'date', dateFormat:'m/d/Y'} |
---|
| 24 | ] |
---|
| 25 | |
---|
| 26 | }); |
---|
| 27 | |
---|
| 28 | // define a custom summary function |
---|
| 29 | Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){ |
---|
| 30 | return v + (record.data.estimate * record.data.rate); |
---|
| 31 | }; |
---|
| 32 | |
---|
| 33 | // utilize custom extension for Group Summary |
---|
| 34 | var summary = new Ext.ux.grid.GroupSummary(); |
---|
| 35 | |
---|
| 36 | var grid = new xg.EditorGridPanel({ |
---|
| 37 | ds: new Ext.data.GroupingStore({ |
---|
| 38 | reader: reader, |
---|
| 39 | // use local data |
---|
| 40 | data: app.grid.dummyData, |
---|
| 41 | sortInfo: {field: 'due', direction: 'ASC'}, |
---|
| 42 | groupField: 'project' |
---|
| 43 | }), |
---|
| 44 | columns: [ |
---|
| 45 | { |
---|
| 46 | id: 'description', |
---|
| 47 | header: 'Task', |
---|
| 48 | width: 80, |
---|
| 49 | sortable: true, |
---|
| 50 | dataIndex: 'description', |
---|
| 51 | summaryType: 'count', |
---|
| 52 | hideable: false, |
---|
| 53 | summaryRenderer: function(v, params, data){ |
---|
| 54 | return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)'); |
---|
| 55 | }, |
---|
| 56 | editor: new Ext.form.TextField({ |
---|
| 57 | allowBlank: false |
---|
| 58 | }) |
---|
| 59 | },{ |
---|
| 60 | header: 'Project', |
---|
| 61 | width: 20, |
---|
| 62 | sortable: true, |
---|
| 63 | dataIndex: 'project' |
---|
| 64 | },{ |
---|
| 65 | header: 'Due Date', |
---|
| 66 | width: 25, |
---|
| 67 | sortable: true, |
---|
| 68 | dataIndex: 'due', |
---|
| 69 | summaryType: 'max', |
---|
| 70 | renderer: Ext.util.Format.dateRenderer('m/d/Y'), |
---|
| 71 | editor: new Ext.form.DateField({ |
---|
| 72 | format: 'm/d/Y' |
---|
| 73 | }) |
---|
| 74 | },{ |
---|
| 75 | header: 'Estimate', |
---|
| 76 | width: 20, |
---|
| 77 | sortable: true, |
---|
| 78 | dataIndex: 'estimate', |
---|
| 79 | summaryType: 'sum', |
---|
| 80 | renderer : function(v){ |
---|
| 81 | return v +' hours'; |
---|
| 82 | }, |
---|
| 83 | editor: new Ext.form.NumberField({ |
---|
| 84 | allowBlank: false, |
---|
| 85 | allowNegative: false, |
---|
| 86 | style: 'text-align:left' |
---|
| 87 | }) |
---|
| 88 | },{ |
---|
| 89 | header: 'Rate', |
---|
| 90 | width: 20, |
---|
| 91 | sortable: true, |
---|
| 92 | renderer: Ext.util.Format.usMoney, |
---|
| 93 | dataIndex: 'rate', |
---|
| 94 | summaryType: 'average', |
---|
| 95 | editor: new Ext.form.NumberField({ |
---|
| 96 | allowBlank: false, |
---|
| 97 | allowNegative: false, |
---|
| 98 | style: 'text-align:left' |
---|
| 99 | }) |
---|
| 100 | },{ |
---|
| 101 | id: 'cost', |
---|
| 102 | header: 'Cost', |
---|
| 103 | width: 20, |
---|
| 104 | sortable: false, |
---|
| 105 | groupable: false, |
---|
| 106 | renderer: function(v, params, record){ |
---|
| 107 | return Ext.util.Format.usMoney(record.data.estimate * record.data.rate); |
---|
| 108 | }, |
---|
| 109 | dataIndex: 'cost', |
---|
| 110 | summaryType: 'totalCost', |
---|
| 111 | summaryRenderer: Ext.util.Format.usMoney |
---|
| 112 | } |
---|
| 113 | ], |
---|
| 114 | |
---|
| 115 | view: new Ext.grid.GroupingView({ |
---|
| 116 | forceFit: true, |
---|
| 117 | showGroupName: false, |
---|
| 118 | enableNoGroups: false, |
---|
| 119 | enableGroupingMenu: false, |
---|
| 120 | hideGroupedColumn: true |
---|
| 121 | }), |
---|
| 122 | |
---|
| 123 | plugins: summary, |
---|
| 124 | |
---|
| 125 | tbar : [{ |
---|
| 126 | text: 'Toggle', |
---|
| 127 | tooltip: 'Toggle the visibility of summary row', |
---|
| 128 | handler: function(){summary.toggleSummaries();} |
---|
| 129 | }], |
---|
| 130 | |
---|
| 131 | frame: true, |
---|
| 132 | width: 800, |
---|
| 133 | height: 450, |
---|
| 134 | clicksToEdit: 1, |
---|
| 135 | collapsible: true, |
---|
| 136 | animCollapse: false, |
---|
| 137 | trackMouseOver: false, |
---|
| 138 | //enableColumnMove: false, |
---|
| 139 | title: 'Sponsored Projects', |
---|
| 140 | iconCls: 'icon-grid', |
---|
| 141 | renderTo: document.body |
---|
| 142 | }); |
---|
| 143 | |
---|
| 144 | }); |
---|
| 145 | |
---|
| 146 | // set up namespace for application |
---|
| 147 | Ext.ns('app.grid'); |
---|
| 148 | // store dummy data in the app namespace |
---|
| 149 | app.grid.dummyData = [ |
---|
| 150 | {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'}, |
---|
| 151 | {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'}, |
---|
| 152 | {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'}, |
---|
| 153 | {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'}, |
---|
| 154 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'}, |
---|
| 155 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'}, |
---|
| 156 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'}, |
---|
| 157 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'}, |
---|
| 158 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'}, |
---|
| 159 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'}, |
---|
| 160 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'}, |
---|
| 161 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'}, |
---|
| 162 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'}, |
---|
| 163 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'}, |
---|
| 164 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'}, |
---|
| 165 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'} |
---|
| 166 | ]; |
---|