--- /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
+\r
+ Ext.QuickTips.init();\r
+\r
+ var xg = Ext.grid;\r
+\r
+ var reader = new Ext.data.JsonReader({\r
+ idProperty:'taskId',\r
+ fields: [\r
+ {name: 'projectId', type: 'int'},\r
+ {name: 'project', type: 'string'},\r
+ {name: 'taskId', type: 'int'},\r
+ {name: 'description', type: 'string'},\r
+ {name: 'estimate', type: 'float'},\r
+ {name: 'rate', type: 'float'},\r
+ {name: 'cost', type: 'float'},\r
+ {name: 'due', type: 'date', dateFormat:'m/d/Y'}\r
+ ],\r
+ // additional configuration for remote\r
+ root:'data',\r
+ remoteGroup:true,\r
+ remoteSort: true\r
+ });\r
+\r
+ // define a custom summary function\r
+ Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
+ return v + (record.data.estimate * record.data.rate);\r
+ };\r
+\r
+ // utilize custom extension for Hybrid Summary\r
+ var summary = new Ext.ux.grid.HybridSummary();\r
+\r
+ var grid = new xg.EditorGridPanel({\r
+ ds: new Ext.data.GroupingStore({\r
+ reader: reader,\r
+ // use remote data\r
+ proxy : new Ext.data.HttpProxy({\r
+ url: 'totals-hybrid.json',\r
+ method: 'GET'\r
+ }),\r
+ sortInfo: {field: 'due', direction: 'ASC'},\r
+ groupField: 'project'\r
+ }),\r
+\r
+ columns: [\r
+ {\r
+ id: 'description',\r
+ header: 'Task',\r
+ width: 80,\r
+ sortable: true,\r
+ dataIndex: 'description',\r
+ summaryType: 'count',\r
+ hideable: false,\r
+ summaryRenderer: function(v, params, data){\r
+ return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');\r
+ },\r
+ editor: new Ext.form.TextField({\r
+ allowBlank: false\r
+ })\r
+ },{\r
+ header: 'Project',\r
+ width: 20,\r
+ sortable: true,\r
+ dataIndex: 'project'\r
+ },{\r
+ header: 'Due Date',\r
+ width: 25,\r
+ sortable: true,\r
+ dataIndex: 'due',\r
+ summaryType:'max',\r
+ renderer: Ext.util.Format.dateRenderer('m/d/Y'),\r
+ editor: new Ext.form.DateField({\r
+ format: 'm/d/Y'\r
+ })\r
+ },{\r
+ header: 'Estimate',\r
+ width: 20,\r
+ sortable: true,\r
+ dataIndex: 'estimate',\r
+ summaryType:'sum',\r
+ renderer : function(v){\r
+ return v +' hours';\r
+ },\r
+ editor: new Ext.form.NumberField({\r
+ allowBlank: false,\r
+ allowNegative: false,\r
+ style: 'text-align:left'\r
+ })\r
+ },{\r
+ header: 'Rate',\r
+ width: 20,\r
+ sortable: true,\r
+ renderer: Ext.util.Format.usMoney,\r
+ dataIndex: 'rate',\r
+ summaryType:'average',\r
+ editor: new Ext.form.NumberField({\r
+ allowBlank: false,\r
+ allowNegative: false,\r
+ style: 'text-align:left'\r
+ })\r
+ },{\r
+ id: 'cost',\r
+ header: 'Cost',\r
+ width: 20,\r
+ sortable: false,\r
+ groupable: false,\r
+ renderer: function(v, params, record){\r
+ return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);\r
+ },\r
+ dataIndex: 'cost',\r
+ summaryType: 'totalCost',\r
+ summaryRenderer: Ext.util.Format.usMoney\r
+ }\r
+ ],\r
+\r
+ view: new Ext.grid.GroupingView({\r
+ forceFit:true,\r
+ showGroupName: false,\r
+ enableNoGroups:false,\r
+ enableGroupingMenu:false,\r
+ hideGroupedColumn: true\r
+ }),\r
+\r
+ plugins: summary,\r
+\r
+ tbar : [{\r
+ text: 'Toggle',\r
+ tooltip: 'Toggle the visibility of summary row',\r
+ handler: function(){summary.toggleSummaries();}\r
+ }],\r
+\r
+ frame: true,\r
+ width: 800,\r
+ height: 450,\r
+ clicksToEdit: 1,\r
+ collapsible: true,\r
+ animCollapse: false,\r
+ trackMouseOver: false,\r
+ //enableColumnMove: false,\r
+ title: 'Sponsored Projects',\r
+ iconCls: 'icon-grid',\r
+ renderTo: document.body\r
+ });\r
+\r
+ grid.on('afteredit', function(){\r
+ var groupValue = 'Ext Forms: Field Anchoring';\r
+ summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
+ setTimeout(function(){ // simulate server call\r
+ // HybridSummary class implements updateSummaryData\r
+ summary.updateSummaryData(groupValue,\r
+ // create data object based on configured dataIndex\r
+ {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});\r
+ }, 2000);\r
+ });\r
+\r
+ // load the remote data\r
+ grid.store.load();\r
+\r
+});\r
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff