PDA

View Full Version : Grouping Summary groupclick event listener



scancubus
3 Oct 2011, 4:59 AM
Hi, using the sencha example, where does the listener go? I tried attaching listener to grid but I am not getting anything. My goal is to be able to click on the header and load the results in a new grid that are under the groupheader.

ie.

Stocks
AAPL
GOOG
JNJ
Bonds
bond1
bond2
bond3

If I clicked on "Stocks", it will load a grid that has more detail on AAPL,GOOG,JNJ

any help is appreciated!



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'
}],
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'
}]
});

arthurakay
3 Oct 2011, 10:07 AM
I don't see your event listener anywhere in the code you posted.

scancubus
3 Oct 2011, 10:42 AM
Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
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'
}],
listeners:{
groupclick : function(arg1,arg2,arg3,arg4){ ///THIS DOESNT FIRE }
}
});

arthurakay
3 Oct 2011, 10:56 AM
Pasting this into my browser console, it works just fine:



Ext.getBody().update('');
Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
fields : [ 'student', 'subject', 'mark' ],
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'
}],
listeners:{
groupclick : function(arg1,arg2,arg3,arg4){
console.log('123');
}///THIS FIRES JUST FINE
}
});

I did modify your store definition to use "fields" instead of "model", because you didn't include your model class.