网格刷新/重绘时，组摘要消失
再次使用另一个ExtJS查询。我有一个具有SummaryGroup功能的网格，该功能可以从面板标题上的工具按钮切换（启用/禁用）。启用一次正确显示，禁用然后尝试启用该功能。分组发生了，但是这些小组的Summery总数又没有回来了？
JS在这里摆弄：http://jsfiddle.net/hD4C4/1/
在小提琴中它会显示小组总数然后如果你禁用并重新启用它们会消失吗？
这是按下按钮一次的图片：
在禁用它然后再次重新启用它之后，这是相同的网格：
下面是面板标题工具按钮上的切换代码：
xtype: 'tool',
type: 'expand',
tooltip: 'Enable grouping',
handler: function(e, target, panelHeader, tool){
var serviceGridView = Ext.getCmp('serviceOverview').getView('groupingFeature'),
gridFeature = serviceGridView.getFeature('serviceOverviewGroupingFeature');
if (tool.type == 'expand') {
gridFeature.enable();
tool.setType('collapse');
tool.setTooltip('Disable grouping');
} else {
gridFeature.disable();
Ext.getCmp('serviceOverview').setLoading(false,false);
Ext.getCmp('serviceOverview').getStore().reload();
tool.setType('expand');
tool.setTooltip('Enable grouping');
}
}
这是我的网格代码（功能函数位于顶部：
var groupingFeature = Ext.create('Ext.grid.feature.GroupingSummary', {
groupHeaderTpl: Ext.create('Ext.XTemplate',
'',
'{name:this.formatName} ({rows.length})',
{
formatName: function(name) {
return '<span style="color: #3892d3;">' + name.charAt(0).toUpperCase() + name.slice(1) + '</span>';
}
}
),
hideGroupedHeader: false,
startCollapsed: true,
showSummaryRow: true,
id: 'serviceOverviewGroupingFeature'
});
Ext.define('APP.view.core.grids.Serviceoverview', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridportlet',
height: 'auto',
id: 'serviceOverview',
cls: 'productsGrid',
viewConfig: {
loadMask: true
},
features: [groupingFeature, {ftype: 'summary'}],
initComponent: function(){
var store = Ext.create('APP.store.Serviceoverview');
Ext.apply(this, {
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id :'service-product',
text : 'Product',
flex: 1,
sortable : true,
dataIndex: 'PACKAGE',
summaryType: function(records) {
if (typeof records[0] !== 'undefined') {
var myGroupName = records[0].get('LISTING');
if (this.isStore) {
return '<span style="font-weight: bold;">Total of all</span>';
}
return '<span style="font-weight: bold;">'+myGroupName.charAt(0).toUpperCase() + myGroupName.slice(1)+' Totals</span>';
//return '<span style="font-weight: bold;">Totals</span>';
}
},
renderer: function(value, metaData ,record) {
return value;
}
},{
id :'service-listing',
text : 'Listing',
flex: 1,
sortable : true,
dataIndex: 'LISTING',
renderer: function(value, metaData ,record){
return value.charAt(0).toUpperCase() + value.slice(1);
}
},{
id :'service-total',
text : 'Running Total',
flex: 1,
sortable : true,
dataIndex: 'TOTAL',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.TOTAL !== null) {
total += parseFloat(record.data.TOTAL);
}
});
return '<span style="font-weight: bold;">£' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
},
renderer: function(value, metaData ,record){
if (value == null) {
return '£0.00';
}
return '£' + numeral(value).format('0,0.00');
}
},{
id :'service-total-paid',
text : 'Total Paid',
flex: 1,
sortable : true,
dataIndex: 'TOTAL_PAID',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.TOTAL_PAID !== null) {
total += parseFloat(record.data.TOTAL_PAID);
}
});
return '<span style="font-weight: bold;">£' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
},
renderer: function(value, metaData ,record){
if (value == null) {
return '£0.00';
}
return '£' + numeral(value).format('0,0.00');
}
},{
id :'service-outstanding',
text : 'Outstanding',
flex: 1,
sortable : true,
dataIndex: 'OUTSTANDING',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.OUTSTANDING !== null) {
total += parseFloat(record.data.OUTSTANDING);
}
});
return '<span style="font-weight: bold;">£' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
},
renderer: function(value, metaData ,record){
if (value == null) {
return '£0.00';
}
return '£' + numeral(value).format('0,0.00');
}
},{
id :'service-properties',
text : 'No. of Clients',
flex: 1,
sortable : true,
dataIndex: 'CLIENTS',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.CLIENTS !== null) {
total += parseFloat(record.data.CLIENTS);
}
});
return '<span style="font-weight: bold;">' + total + '</span>';
}
},{
id :'service-average-total',
text : 'Av. Total',
flex: 1,
sortable : true,
dataIndex: 'AVERAGE_TOTAL',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.AVERAGE_TOTAL !== null) {
total += parseFloat(record.data.AVERAGE_TOTAL);
}
});
return '<span style="font-weight: bold;">£' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
},
renderer: function(value, metaData ,record){
if (value == null) {
return '£0.00';
}
return '£' + numeral(value).format('0,0.00');
}
},{
id :'service-average-total-paid',
text : 'Av. Total Paid',
flex: 1,
sortable : true,
dataIndex: 'AVERAGE_TOTAL_PAID',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.AVERAGE_TOTAL_PAID !== null) {
total += parseFloat(record.data.AVERAGE_TOTAL_PAID);
}
});
return '<span style="font-weight: bold;">£' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
},
renderer: function(value, metaData ,record){
if (value == null) {
return '£0.00';
}
return '£' + numeral(value).format('0,0.00');
}
},{
id :'service-average-outstanding',
text : 'Av. Outstanding',
flex: 1,
sortable : true,
dataIndex: 'AVERAGE_OUTSTANDING',
summaryType: function(values) {
var total=0.0;
Ext.Array.forEach(values, function (record){
if (record.data.AVERAGE_OUTSTANDING !== null) {
total += parseFloat(record.data.AVERAGE_OUTSTANDING);
}
});
return '<span style="font-weight: bold;">£' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
},
renderer: function(value, metaData ,record){
if (value == null) {
return '£0.00';
}
return '£' + numeral(value).format('0,0.00');
}
}]
});
this.callParent(arguments);
}
});
提前谢谢你:) 森
1 个答案:
答案 0 :(得分：4)
看起来像虫子。
我对代码进行了一些分析，发现此问题是由generateSummaryData方法中的问题引起的。在此方法中，您可以找到以下代码：
if (hasRemote || store.updating || groupInfo.lastGeneration !== group.generation) {
record = me.populateRecord(group, groupInfo, remoteData);
if (!lockingPartner || (me.view.ownerCt === me.view.ownerCt.ownerLockable.normalGrid)) {
groupInfo.lastGeneration = group.generation;
}
} else {
record = me.getAggregateRecord(group);
}
首次渲染网格时，首先对所有组执行分支，然后重新启用 - 第二个分支。调用getAggregateRecord而不是populateRecord会产生空摘要记录。我没有更深入，所以现在我只能给你肮脏的黑客来覆盖它（强制代码进入第一个分支）：
store.updating = true;
feature.enable();
store.updating = false;
JSfiddle：http://jsfiddle.net/P2e7s/6/
经过一番挖掘后，我发现很可能会出现此问题，因为调用group.generation时populateRecord不会增加。因此group.generation始终等于1，因此仅当lastGeneration为空（第一次代码传递）时才会填充记录。重新启用功能后，系统会创建新组，但也会将generation设置为1。
所以我提出了不那么肮脏的黑客行为：
Ext.define('Ext.override.grid.feature.AbstractSummary', {
override: 'Ext.grid.feature.GroupingSummary',
populateRecord: function (group, groupInfo, remoteData) {
++group.generation;
return this.callParent(arguments);
}
});
使用该覆盖，您可以简单地启用功能，它应该可以工作。
JSFiddle：http://jsfiddle.net/P2e7s/9/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？