Javascript 复选框选择+;ExtJS 4中带有摘要行的网格面板
给定以下网格面板:Javascript 复选框选择+;ExtJS 4中带有摘要行的网格面板,javascript,extjs,extjs4,Javascript,Extjs,Extjs4,给定以下网格面板: Ext.onReady(function() { var sm = new Ext.selection.CheckboxModel( { listeners:{ selectionchange: function(selectionModel, selected, options){ // Bunch of code to update store }
Ext.onReady(function() {
var sm = new Ext.selection.CheckboxModel( {
listeners:{
selectionchange: function(selectionModel, selected, options){
// Bunch of code to update store
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
features: [{
ftype: 'summary'
}],
store: store,
defaults: { // defaults are applied to items, not the container
sortable:true
},
selModel: sm,
columns: [
{header: 'Column 1', flex: 1, dataIndex: 'd1', summaryRenderer: function(value, summaryData, dataIndex) { return "Selected Data"} },
{header: 'C2', width: 150, dataIndex: 'd2', summaryType: 'sum'},
{header: 'C3', width: 150, dataIndex: 'd3', renderer: dRenderer, summaryType: 'sum'},
{header: 'C4', width: 150, dataIndex: 'd4', renderer: dRenderer, summaryType: 'sum'},
{header: 'C5', width: 150, renderer: total, summaryRenderer: grandTotal}
],
width: "100%",
title: 'Grid',
renderTo: 'grid',
viewConfig: {
stripeRows: true
}
});
});
需要如何重构以仅汇总所选行的数据?我知道我可能需要覆盖Summary功能的sum函数,但在文档中找不到示例或正确的语法
谢谢
以下是我尝试的解决方案(发布在Sencha 4.x帮助论坛上,没有回应):
Ext.define('Ext.grid.feature.SelectedSummary'{
扩展:“Ext.grid.feature.Summary”,
别名:“feature.selectsummary”,
generateSummaryData:函数(){
var me=这个,
数据={},
store=me.view.store,
selectedRecords=me.view.selModel.selected,
columns=me.view.headerCt.getColumnsForTpl(),
i=0,
长度=列。长度,
现场数据,
钥匙
公司;
对于(i=0,length=columns.length;i
但这仅在初始渲染时正确渲染,并且仅在使用调试器逐步完成代码时渲染。在某种竞争条件下,行在未完成计算的情况下被渲染
有什么想法吗?我的问题是否太具体了?也许只是编写我自己的功能并将其添加到网格面板的简单提示。同事的解决方案: summary功能可以将函数作为summaryType。由于默认情况下,列配置不会传递给此函数,因此需要定义一个将保留dataIndex的闭包
var sm = new Ext.selection.CheckboxModel( {
listeners:{
selectionchange: function(selectionModel, selected, options){
// Must refresh the view after every selection
myGrid.getView().refresh();
// other code for this listener
}
}
});
var getSelectedSumFn = function(column){
return function(){
var records = myGrid.getSelectionModel().getSelection(),
result = 0;
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
}
// create the Grid
var myGrid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: myStore,
defaults: { // defaults are applied to items, not the container
sortable:true
},
selModel: sm,
columns: [
{header: 'h0', flex: 1, dataIndex: 'groupValue'},
{header: 'h1', width: 150, dataIndex: 'd1', summaryType: getSelectedSumFn('d1')},
{header: 'h2', width: 150, dataIndex: 'd2', renderer: r, summaryType: getSelectedSumFn('d2')},
{header: 'h3', width: 150, dataIndex: 'd3', renderer: r, summaryType: getSelectedSumFn('d3')},
{header: 'h4', width: 150, dataIndex: 'd4', renderer: r, summaryType: getSelectedSumFn('d4')}
],
width: "100%",
height: "300",
title: 'Data',
renderTo: 'data',
viewConfig: {
stripeRows: true
}
});
更新了一点以前的解决方案:
var sm = new Ext.selection.CheckboxModel({
listeners: {
selectionchange: function (selectionModel, selected, options) {
// Must refresh the view after every selection
selectionModel.view.refresh();
}
}
});
var getSelectedSumFn = function (column, selModel) {
return function () {
var records = selModel.getSelection(),
result = 0;
Ext.each(records, function (record) {
result += record.get(column) * 1;
});
return result;
};
};
然后在网格中使用以下行:
summaryType:getSelectedSumFn('d4',sm)}
我更喜欢这个,这很好。我只需为存储添加一个“加载”侦听器,并以这种方式更新我想要的任何内容即可
var sm = new Ext.selection.CheckboxModel({
listeners: {
selectionchange: function (selectionModel, selected, options) {
// Must refresh the view after every selection
selectionModel.view.refresh();
}
}
});
var getSelectedSumFn = function (column, selModel) {
return function () {
var records = selModel.getSelection(),
result = 0;
Ext.each(records, function (record) {
result += record.get(column) * 1;
});
return result;
};
};