ExtJS页面中增加"合计"行
遇到给ExtJS页面加一个合计行的问题,在后台代码里添加太麻烦了,这里给大家一个简单的方法。
//合计函数Begin
function GridSum(grid)
{
var sum1 = 0; //存储第一个列的合计值
var sum2 = 0; //存储第二个列的合计值
//...有几个列需要合计就声明几个变量
grid.store.each(function(record){ //遍历整个record
sum1 += Number(record.data.money1); //把money1列下面的所有值进行加和运算
sum2 += Number(record.data.money2); //把money2列下面的所有值进行加和运算
});
var p = new Ext.data.Record(
{
money1:sum1, //把money1列与合计后得到的值对应起来
money2:sum2 //把money2列与合计后得到的值对应起来
}
);
grid.store.insert(0, p);// 插入到当前页的第一行 //grid.store.insert(grid.getStore().getCount(), p); //插入到当前页的最后一行
}
//合计函数End
// 在Store的load事件被触发后,调用合计函数
gridui.getStore().on('load', function() {
GridSum(gridui.getGrid());//调用合计函数,gridui是你页面中定义的gridui变量名
});
注: 1.money1,money2是你页面中"钱一"列和"钱二"列各自对应的"dataIndex"属性值。
2.Store的load事件在"刚进入页面"时,"点击下一页"时,"点击查询"时,都会被触发。
3.该方法是对当前页的值进行合计,并不统计所有页的总合计值,点击下一页后会自动统 计下页的合计值并显示。