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