Hi,
I am a newbie to Ext framework and I have started to work on GridPanels. All I need is a Grid view showing a summary of the data at the bottom of the grid . There is no grouping involved. I tried a similar example with totals.js example and it works fine.
Jans Word Report: Tables::
just like you sometimes want to include the paragraph symbol in a selection. And sometimes not! You can display the formula that is used for the calculation.
http://www.jegsworks.com/Lessons/words/report/tables.htmHOME |
Code :
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
var reader = new Ext.data.JsonReader({
idProperty:'coverageHeading',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'coverageHeading', type: 'string'},
{name: 'A', type: 'float'},
{name: 'A_Debris', type: 'float'},
{name: 'A_OL', type: 'float'},
{name: 'B', type: 'float'},
{name: 'C', type: 'float'},
{name: 'D', type: 'float'}
]
});
var summary = new Ext.grid.GroupSummary();
var grid = new xg.EditorGridPanel({
ds: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'coverageHeading', direction: "ASC"},
groupField:'project'
}),
columns: [
{
id: 'coverageHeading',
header: "test",
width: 80,
sortable: true,
dataIndex: 'coverageHeading',
hideable: false
},{
header: "A",
width: 50,
sortable: true,
dataIndex: 'A',
summaryType:'sum'
},{
header: "A Debris",
width: 50,
sortable: true,
dataIndex: 'A_Debris',
renderer: Ext.util.Format.usMoney
},{
header: "A Ordinance & law",
width: 50,
sortable: true,
dataIndex: 'A_OL'
},{
header: "B",
width: 50,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'B'
},{
header: "C",
width: 50,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'C'
},{
header: "D",
width: 50,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'D'
}
],
view: new Ext.grid.GroupingView({
forceFit:true,
showGroupName: false,
enableNoGroups:false, // REQUIRED!
hideGroupedColumn: true
}),
plugins: summary,
frame:true,
width: 800,
height: 250,
clicksToEdit: 1,
collapsible: false,
animCollapse: false,
trackMouseOver: false,
//enableColumnMove: false,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body
});
});
Ext.grid.dummyProjects = [
{projectId: 100, project: 'Ext Forms: Field Anchoring'}
];
Ext.grid.dummyData = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', coverageHeading: 'Policy Limits', A: 120000, A_Debris: 10000, A_Ol: 0, B:25000, C: 50000, D: 10000},
{projectId: 100, project: 'Ext Forms: Field Anchoring', coverageHeading: 'Covered Amount', A: 10000, A_Debris: 10, A_Ol: 10, B:10, C: 10, D: 10}
];When I run this code I get a 'hidden' is null or not an object javascript error.
Please let me know if I am missing something.
Thanks,
Navin
Got it. Had to include groupField as one of the columns.
 Nortel Unveils Vision, Strategy for Israeli High-Performance Net
 Busy Friday Leads to Strong Close for Net Stocks
|
HOME