Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / grid / totals.js
index c04c254..b67d346 100644 (file)
@@ -1,11 +1,9 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 Ext.onReady(function(){\r
 \r
     Ext.QuickTips.init();\r
@@ -13,7 +11,7 @@ Ext.onReady(function(){
     var xg = Ext.grid;\r
 \r
     var reader = new Ext.data.JsonReader({\r
-        idProperty:'taskId',\r
+        idProperty: 'taskId',\r
         fields: [\r
             {name: 'projectId', type: 'int'},\r
             {name: 'project', type: 'string'},\r
@@ -28,24 +26,25 @@ Ext.onReady(function(){
     });\r
 \r
     // define a custom summary function\r
-    Ext.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
+    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
         return v + (record.data.estimate * record.data.rate);\r
-    }\r
+    };\r
 \r
-    var summary = new Ext.grid.GroupSummary(); \r
+       // utilize custom extension for Group Summary\r
+    var summary = new Ext.ux.grid.GroupSummary();\r
 \r
     var grid = new xg.EditorGridPanel({\r
         ds: new Ext.data.GroupingStore({\r
             reader: reader,\r
-            data: xg.dummyData,\r
-            sortInfo:{field: 'due', direction: "ASC"},\r
-            groupField:'project'\r
+                       // use local data\r
+            data: app.grid.dummyData,\r
+            sortInfo: {field: 'due', direction: 'ASC'},\r
+            groupField: 'project'\r
         }),\r
-\r
         columns: [\r
             {\r
                 id: 'description',\r
-                header: "Task",\r
+                header: 'Task',\r
                 width: 80,\r
                 sortable: true,\r
                 dataIndex: 'description',\r
@@ -58,26 +57,26 @@ Ext.onReady(function(){
                    allowBlank: false\r
                 })\r
             },{\r
-                header: "Project",\r
+                header: 'Project',\r
                 width: 20,\r
                 sortable: true,\r
                 dataIndex: 'project'\r
             },{\r
-                header: "Due Date",\r
+                header: 'Due Date',\r
                 width: 25,\r
                 sortable: true,\r
                 dataIndex: 'due',\r
-                summaryType:'max',\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
+                header: 'Estimate',\r
                 width: 20,\r
                 sortable: true,\r
                 dataIndex: 'estimate',\r
-                summaryType:'sum',\r
+                summaryType: 'sum',\r
                 renderer : function(v){\r
                     return v +' hours';\r
                 },\r
@@ -87,12 +86,12 @@ Ext.onReady(function(){
                    style: 'text-align:left'\r
                 })\r
             },{\r
-                header: "Rate",\r
+                header: 'Rate',\r
                 width: 20,\r
                 sortable: true,\r
                 renderer: Ext.util.Format.usMoney,\r
                 dataIndex: 'rate',\r
-                summaryType:'average',\r
+                summaryType: 'average',\r
                 editor: new Ext.form.NumberField({\r
                     allowBlank: false,\r
                     allowNegative: false,\r
@@ -100,7 +99,7 @@ Ext.onReady(function(){
                 })\r
             },{\r
                 id: 'cost',\r
-                header: "Cost",\r
+                header: 'Cost',\r
                 width: 20,\r
                 sortable: false,\r
                 groupable: false,\r
@@ -108,21 +107,28 @@ Ext.onReady(function(){
                     return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);\r
                 },\r
                 dataIndex: 'cost',\r
-                summaryType:'totalCost',\r
+                summaryType: 'totalCost',\r
                 summaryRenderer: Ext.util.Format.usMoney\r
             }\r
         ],\r
 \r
         view: new Ext.grid.GroupingView({\r
-            forceFit:true,\r
+            forceFit: true,\r
             showGroupName: false,\r
-            enableNoGroups:false, // REQUIRED!\r
+            enableNoGroups: false,\r
+                       enableGroupingMenu: false,\r
             hideGroupedColumn: true\r
         }),\r
 \r
         plugins: summary,\r
 \r
-        frame:true,\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
@@ -134,15 +140,13 @@ Ext.onReady(function(){
         iconCls: 'icon-grid',\r
         renderTo: document.body\r
     });\r
-});\r
 \r
-Ext.grid.dummyProjects = [\r
-    {projectId: 100, project: 'Ext Forms: Field Anchoring'},\r
-    {projectId: 101, project: 'Ext Grid: Single-level Grouping'},\r
-    {projectId: 102, project: 'Ext Grid: Summary Rows'}\r
-];\r
+});\r
 \r
-Ext.grid.dummyData = [\r
+// set up namespace for application\r
+Ext.ns('app.grid');\r
+// store dummy data in the app namespace\r
+app.grid.dummyData = [\r
     {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'},\r
     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},\r
     {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'},\r