Code:
var summaryConfig = {showHeader: true,
//showToggle: true,
//disableSummaryColors: true,
listeners: {
beforeapply: function (summary, data, g) {
// create new group data, save id
g.buyId = Ext.id();
// custom header, need to override headerTpl
//data.header.custom = 'data';
//data.hstyle = '';
// custom footer
data.fstyle = '';
data.footer = '<div style="text-align:right;"><div id="' + g.buyId + '" style="display:inline-block;"></div></div>';
},
render: function (summary, data, g) {
// defer all creation until after the summary nodes render
summary.createButton.defer(1, summary, [g.buyId, g,
{
text: 'Buy Now',
iconCls: 'ss_sprite ss_tick',
handler: function (button, e) {
Ext.Msg.alert('Alert', button.text);
}
}
]);
}
}
// custom functions
, createButton: function (id, group, config) {
new Ext.Button(config).render(id);
}
};
var summary = new Ext.ux.GroupSummary(summaryConfig );
gridPlugins.push(summary); // this is the array passed to GridPanel's config.plugins
* this example will render an ExtJS Button in the footer summary area right aligned.