Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / examples / grid / totals-hybrid.js

diff --git a/examples/grid/totals-hybrid.js b/examples/grid/totals-hybrid.js
new file mode 100644 (file)
index 0000000..353406c
--- /dev/null
+++ b/examples/grid/totals-hybrid.js
@@ -0,0 +1,165 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+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