Refresh summary in an Ext4 grid
HTML
<link rel="stylesheet" href="/js/lib/ext-4.0.2a/resources/css/ext-all.css">
JavaScript
Ext.require('Ext.grid.feature.Summary', function() {
Ext.override(Ext.grid.feature.Summary, {
refresh: function() {
if(this.view.rendered) {
var tpl = Ext.create(
'Ext.XTemplate',
'{[this.printSummaryRow()]}',
this.getFragmentTpl()
);
tpl.overwrite(this.getRowEl(), {});
}
},
getRowEl: function() {
return this.view.el.down('tr.x-grid-row-summary');
}
});
});
Ext.onReady(function() {
var sm = Ext.create('Ext.selection.CheckboxModel', {
listeners:{
selectionchange: function(selectionModel, selectedRecords, options) {
grid.getView().getFeature(0).refresh();
}
}
});
var selSumFn = function(column, selModel) {
return function() {
var records = selModel.getSelection(),
result = 0;
Ext.each(records, function(record) {
result += record.get(column) * 1;
});
return result;
};
};
var store = Ext.create('Ext.data.ArrayStore', {
expandData: true,
// store configs
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
data: [[0, 1, 2], [1, 3, 4], [2, 5, 6], [3, 7, 8], [4, 9, 10]],
fields: [
{name: 'id', type: 'int'},
{name: 'col1', type: 'int'},
{name: 'col2', type: 'int'},
]
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
autoScroll:true,
features: [
{
ftype: 'summary'
...