X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/grid/group-summary-grid.js diff --git a/examples/grid/group-summary-grid.js b/examples/grid/group-summary-grid.js new file mode 100644 index 00000000..7f0a2ab3 --- /dev/null +++ b/examples/grid/group-summary-grid.js @@ -0,0 +1,170 @@ +Ext.require([ + 'Ext.grid.*', + 'Ext.data.*', + 'Ext.form.field.Number', + 'Ext.form.field.Date', + 'Ext.tip.QuickTipManager' +]); + +Ext.define('Task', { + extend: 'Ext.data.Model', + idProperty: 'taskId', + fields: [ + {name: 'projectId', type: 'int'}, + {name: 'project', type: 'string'}, + {name: 'taskId', type: 'int'}, + {name: 'description', type: 'string'}, + {name: 'estimate', type: 'float'}, + {name: 'rate', type: 'float'}, + {name: 'cost', type: 'float'}, + {name: 'due', type: 'date', dateFormat:'m/d/Y'} + ] +}); + +var data = [ + {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'}, + {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'}, + {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'}, + {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'}, + {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'}, + {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'}, + {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'}, + {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'}, + {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'}, + {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'} +]; + +Ext.onReady(function(){ + + Ext.tip.QuickTipManager.init(); + + var store = Ext.create('Ext.data.Store', { + model: 'Task', + data: data, + sorters: {property: 'due', direction: 'ASC'}, + groupField: 'project' + }); + + var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { + clicksToEdit: 1, + listeners: { + edit: function(){ + // refresh summaries + grid.getView().refresh(); + } + } + }); + var showSummary = true; + var grid = Ext.create('Ext.grid.Panel', { + width: 800, + height: 450, + frame: true, + title: 'Sponsored Projects', + iconCls: 'icon-grid', + renderTo: document.body, + store: store, + plugins: [cellEditing], + dockedItems: [{ + dock: 'top', + xtype: 'toolbar', + items: [{ + tooltip: 'Toggle the visibility of the summary row', + text: 'Toggle Summary', + handler: function(){ + var view = grid.getView(); + showSummary = !showSummary; + view.getFeature('group').toggleSummaryRow(showSummary); + view.refresh(); + } + }] + }], + features: [{ + id: 'group', + ftype: 'groupingsummary', + groupHeaderTpl: '{name}', + hideGroupedHeader: true + }], + columns: [{ + text: 'Task', + flex: 1, + tdCls: 'task', + sortable: true, + dataIndex: 'description', + hideable: false, + summaryType: 'count', + renderer: function(v, params) { + params.tdCls = "task"; + return v; + }, + summaryRenderer: function(v, params, data) { + return ((v === 0 || v > 1) ? '(' + v + ' Tasks)' : '(1 Task)'); + } + }, { + header: 'Project', + width: 20, + sortable: true, + dataIndex: 'project' + }, { + header: 'Due Date', + width: 120, + sortable: true, + dataIndex: 'due', + summaryType: 'max', + renderer: Ext.util.Format.dateRenderer('m/d/Y'), + field: { + xtype: 'datefield' + } + }, { + header: 'Estimate', + width: 75, + sortable: true, + dataIndex: 'estimate', + summaryType: 'sum', + renderer: function(v){ + return v + ' hours'; + }, + field: { + xtype: 'numberfield' + } + }, { + header: 'Rate', + width: 75, + sortable: true, + renderer: Ext.util.Format.usMoney, + dataIndex: 'rate', + summaryType: 'average', + field: { + xtype: 'numberfield' + } + }, { + id: 'cost', + header: 'Cost', + width: 75, + sortable: false, + groupable: false, + renderer: function(v, params, record){ + return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate')); + }, + dataIndex: 'cost', + summaryType: function(records){ + var i = 0, + length = records.length, + total = 0, + record; + + for (; i < length; ++i) { + record = records[i]; + total += record.get('estimate') * record.get('rate'); + } + return total; + }, + summaryRenderer: Ext.util.Format.usMoney + }] + }); +});