PDA

View Full Version : Grouping + Summary Row in Grid Panel Ext 4.0.7



Prasad_Guduri
13 Feb 2014, 10:53 AM
Hi All,

Can anyone please help me how to design the grid like below?

http://www.sencha.com/forum/image/png;base64,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j8Vtt+L+Lu1rXM/Y43z93foAYKs0v8+8OKf159nmXJecX5NxwzdMC0UMYAsdv3htg/4PVhTmAQAA3CVnunit9TlyAACAmZ3tO14AAACngOIFAAAwM8ULAABgZooXAADAzFYWLwAAADYzWbyufO5lAAAANqR4AQAAzEzxAgAAmJniBQAAMDPFCwAAYGaKFwAAwMwULwAAgJkpXgAAADNTvAAAAGameAEAAMxs7eL1pa+9VH3oY7cWrt5s/G7n5q1bg/EAAAC01i5eoWyV8p0fVtXt771aXfjpvcF4AAAAWhsVr1i6Dj779fHi9eSN6k2//CcD9z7+zfLY2bxYvb3Z9o3q4W7aBx6/frL7Uvg+3/TQc9UHSmMBAIBz5djFK5au8BHEJ28eri5ej75Ynn9XLBevExe/z1i2TsX3DQAAnAbrF6+rN5t5oWDljlO8Hn40FKHFHad4B2qpuESrpn/iueredHoyL25roS5g2X712+/0d8LiuIeuL9Yft5nqx2X7E54X9q1d/zerBx8Kz69XD36iW0+6XLp+AABga61dvMIf0AhJ73QFt754u7p68OXVxau3KBltIQrPuztSsWzkJSYUlEcXBSYvRc3zrLAMP0pYuOMVtxGKV/q4nheL2tufXN6Xwby4rnR9xe2nY7OylW07Lre0fgAAYGsdqXiVSlf4/a61ild2x6sVS0iwKEVj5Sa/K9UL687vFA22O128lraXLpvt/8rileqWCZb3PRbQdN/if49kPwEAgK13pOIVSlcsW+HjhaFwRccrXrF0DMvGquK1fBepdlqKV9x+It/vdh2LO3/9Xa5H23UUvz8AAGBrrV28wv+nK5SrMaP/H6+suKTaAhLKUFeM8tLUl5juo4ZxeumOUFa8hgVpunhNlqupeXFd6foKxSsu0xaq7KOGYUzc90YyHQAAOBPWLl7H1pelhXsff7H/iGEsMP1H8fLyFcXpg5LSagpNYXpa9oYf9asLWFaohvOTu04nULyGd/auV/fmxasW15vuMwAAcDbMX7zulvyjhltl8btuS4UOAADYeorXabDVpREAAFjl7BQvAACAU0rxAgAAmJniBQAAMDPFCwAAYGaKFwAAwMwmi9edO3cAAADY0MriJSIiIiIiIptF8RIREREREZk5ipeIiIiIiMjMUbxERERERERmjuIlIiIiIiIycxQvERERERGRmaN4iYiIiIiIzJzXvngd7le7u/vVYfdURERERETkrOXoxSsUpZ2damfvoJvQ5mCvnnacAlUqXnEbvb1quLUNM1vZO6j2lEgREZEk9bkxPadn1w+LpOPS8/7YdBGR7crxitfuXl0wdqv92DCaabvHKzNjxSuddrB3vFJ3F3O4v9ueFBQvERGRRepz+KJrHVb76fVDkvAGbhzXnFO7J2PTRUS2LccsXvvVQX3w2+2OnM1BcT8pS2FM/+7U4gDbl5N0+jrFq3m3a6866Kbvh7tr8V2v0raacaEcttP3DsKBPj6O8+v159sZTJ9Yfiz5+kRERCRJdz7vni2STe/Pp2PTRUS2L8cuXv3BMD4/6kEy3MUKLaY0P5vWFLa4jUH5GdlWM64rYWE76eM4P/3aLFxn3eWbwYXk6xMREZE68Q3M5Jw9SHY+75+PTRcR2b5sULxCDxm5i1RPC9MXuoNkPi+Oz8tKaVycno4d21Y6rvQ4/xrmhZSmjz0uZdV8ERGRc51QnLo3MwdRvETk7Gej4tU8jgfAOH2sfDRjk4Pt1PipdaTT1xlXepx/DfNCStPHHpeyar6IiMg5T/o7W4tkhao/n45NFxHZvmxWvNIMDpKFg2q23ODjg/n6Vm4jZo1tlR6nX5MDenGfxh6Xsmq+iIjIOcvh/l5yhyuct7s3YbNzsD+uISJnPTMUr+5x+vG/bnr8aGKwu7fXji+tb51txJS2lY4rPU6mNQfxqX0ae5wlXU/gvCAiIlKn+V3pwvkxnFPTu1ndm6ntuHWmi4hsV45evERERERERORIUbxERERERERmjuIlIiIiIiIycxQvERERERGRmaN4iYiIiIiIzBzFS0REREREZOasLF4AAABsZrJ4/ccPquYrAAAAx7eyeAEAALAZxQsAAGBmihcAAMDMFC8AAICZKV4AAAAzU7wAAABmpngBAADMbDuK11N71c7OTrXztoPyfAAAgFNsg+J1UN0XylDJhf3qM8VlorjsXnW1OD+jeAHAqXf1bd11QOF8PTUvtTQuXgNk7nnEJ3OA7XIid7w+88juEQ+CihcAnClpQcrP11PzUivHHVa/faGdf99T+TyA023W4hWnR3F+/25Wry5gX9iv7hlMS9aneAHA6dWdw+97W+F8PTUvtc64eD2w8pM1AKfPfMUrK0uxbLXvUK264xXf0dqtfvsL9XPFCwBOqe6cHc7RS+frqXnrriMbU89ztwvYRrMVr2HRqg0OpOXild8hU7wA4HRrz93d+Tw7X0/NW3cdvTjd3S5gS52a4pWvo11e8QKA02txF2rJhb3qvtF5aXmaWkcc524XsP1OzUcN4/x2HfEAq3gBwNaYOl9n84rXDoVxg2nudgFb7DX54xrL80IBi2Us2K3uUbwAYLvMUrwW1wfudgHb7ESKFwAAAOMULwAAgJkpXgAAADNTvAAAAGameAEAAMxM8QIAAJiZ4gUAADAzxQsAAGBmihcAAMDMJouXiIiIiIiIbB7FS0REREREZOYoXiIiIiIiIjNH8RIREREREZk5ipeIiIiIiMjMUbxERERERERmjuIlIiIiIiIycxQvERERERGRmaN4iYiIiIiIzBzFS0REREREZOYoXiIiIiIiIjNH8RIREREREZk5ipeIiIiIiMjMUbxERERERERmjuIlIiIiIiIycxQvERERERGRmaN4iYiIiIiIzBzFS0REREREZNZU1f8DAA+N4Zv/+GUAAAAASUVORK5CYII=

Thanks In Advance,
Prasad

scottmartin
13 Feb 2014, 11:12 AM
I am unable to see an image on your post


Grid Panel Ext 4.0.7

It at all possible, upgrade away from 4.0, as there were numerous bugs.

Prasad_Guduri
13 Feb 2014, 11:47 AM
47923


If i Apply feature: groupingsummary, Summary Row is showing for each group. I tried all combinations with group, summary, groupingsummary features of grid.

Thanks In Advance,
Prasad

Prasad_Guduri
13 Feb 2014, 11:56 AM
Hi Martin,

Below code is actually what i want to design.

But its working fine in version 4.2.1 and not working in 4.0.7 Version.

Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});


Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary',
showSummaryRow: false
},{

ftype: 'summary',
showSummaryRow: true
}],
store: {
model: 'TestResult',
groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
},{
student: 'Student 1',
subject: 'Science',
mark: 72
},{
student: 'Student 2',
subject: 'Math',
mark: 96
},{
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]
});


Is there any other way to get this summaryRow?

Thanks In Advance,
Prasad