-/*\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.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
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
});\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
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
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
})\r
},{\r
id: 'cost',\r
- header: "Cost",\r
+ header: 'Cost',\r
width: 20,\r
sortable: false,\r
groupable: false,\r
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
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