PDA

View Full Version : mzPivotGrid 3.5.0 with multiple topAxis, cell width misalignment issue



jxyiliu
17 May 2016, 11:39 AM
Hi There,

My company is using mzPivotGrid 3.5.0 for some reporting pages. We encounter an issue that if we configured topAxis with two dataIndex, and if the text length of second dataindex is shorter than first dataindex, the width of second container does not align parent after expend.

It is very hard for us to upgrade the mzPivotGrid version as it has been released to customer instead we can only changes on html pages.



Please see the imgs below for the issues:
1. Before Expend
54513

2. After Expend:
54514

The following is the code we defined our PivotGrid. Please help what can be done to fix this one. Thanks in advance for all your helps.

Ext.Loader.setConfig({enabled: true});
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var myStore = new Ext.data.Store({
data: ${displayObject.json},

fields: [
{name: 'Node Name', type: 'string'},
{name: 'Shelf Type', type: 'string'},
{name: 'Slot #', type: 'string'},
{name: 'Card Category', type: 'string'},
{name: 'Card Type', type: 'string'},
{name: 'Card Name (Part #, Serial #, CLEI)', type: 'string'},
{name: 'Card Software Version', type: 'string'},
{name: 'Total IOM slots', type: 'int'},
{name: 'IOM slots used', type: 'int'},
{name: 'IOM slots free', type: 'int'},
{name: 'IOM slots used %', type: 'number'},
{name: 'Shelf slots removable', type: 'int'}
]
});

var excelExport = Ext.create('Mz.pivot.plugin.ExcelExport', {
title: 'Service Portal Report Export'
});
var pivotGrid = Ext.create('Mz.examples.Common', {
store: myStore,
renderTo: cardInventoryHtmlReportContainer,
enableLocking: true,
// Height must be dictated for horizontal scroll to work
height: 600,
single: true,

leftAxis: [{
width: 100,
dataIndex: 'Node Name',
header: 'Node Name'
},{
width: 75,
dataIndex: 'Slot #',
header: 'Shelf / Slot #'
},{
width: 125,
dataIndex: 'Card Category',
header: 'Card Category'
},{
width: 250,
dataIndex: 'Card Type',
header: 'Card Type'
},{
width: 250,
dataIndex: 'Card Name (Part #, Serial #, CLEI)',
header: 'Card Name (Part #, Serial #, CLEI)'
}],

topAxis: [{
flex: 1,
dataIndex: 'Shelf Type',
header: 'Shelf Type'
}],

aggregate: [{
flex: 1,
dataIndex: 'Slot Number',
header: '# Cards',
aggregator: 'count',
align: 'center',
renderer: Ext.util.Format.numberRenderer('0')
}],

viewConfig: {
trackOver: true,
stripeRows: false
},

tbar: [{
xtype: 'button',
text: 'Excel Current Data',
handler: function () {
var f = excelExport.getExcelData(true);
$( "#excellData" ).val(encodeURIComponent(f));
$( "#excellExportButton" ).trigger( "click" );
}
},{
xtype: 'button',
text: 'Excel All Data',
handler: function () {
var f = excelExport.getExcelData(false);
$( "#excellData" ).val(encodeURIComponent(f));
$( "#excellExportButton" ).trigger( "click" );
}
},{
xtype: 'combo',
fieldLabel: 'Change View',
flex: 1,
editable: false,
value: 'r1',
store: [
['r1', 'Node Card Configuration'],
['r2', 'Nodes and Card Details by Card Category'],
],
listeners: {
select: function(combo, records, eOpts){
switch(records[0].get('field1')){
case 'r1':
pivotGrid.reconfigurePivot({
rowGrandTotalsPosition: 'last',
leftAxis: [{
width: 100,
dataIndex: 'Node Name',
header: 'Node Name'
},{
width: 75,
dataIndex: 'Slot #',
header: 'Shelf / Slot #'
},{
width: 125,
dataIndex: 'Card Category',
header: 'Card Category'
},{
width: 250,
dataIndex: 'Card Type',
header: 'Card Type'
},{
width: 250,
dataIndex: 'Card Name (Part #, Serial #, CLEI)',
header: 'Card Name (Part #, Serial #, CLEI)'
}],

topAxis: [{
flex: 1,
dataIndex: 'Shelf Type',
header: 'Shelf Type'
}],

aggregate: [{
flex: 1,
dataIndex: 'Slot Number',
header: '# Cards',
aggregator: 'count',
align: 'center',
renderer: Ext.util.Format.numberRenderer('0')
}]
});
break;
case 'r2':
pivotGrid.reconfigurePivot({
rowGrandTotalsPosition: 'last',
leftAxis: [{
dataIndex: 'Node Name',
header: 'Node Name'
}],

topAxis: [{
dataIndex: 'Card Category',
header: 'Card Category'
},{
dataIndex: 'Card Type',
header: 'Card Type'
}],

aggregate: [{
flex: 1,
dataIndex: 'Slot Number',
header: '# Cards',
aggregator: 'count',
align: 'center',
renderer: Ext.util.Format.numberRenderer('0')
}]
});
break;


}
}
}
}],


plugins: [
excelExport
],

listeners: {
pivotgroupexpand: function(grid, type, node){
if(type === 'row'){
var recursiveFn = function(children){
Ext.Array.each(children || [], function(child){
child.expanded = true;
recursiveFn(child.children);
});
}

recursiveFn(node.children);
grid.refreshView();
}
}
}

});

This is the Json data fit into grid:
[{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/2","Card Category":"Daughter Card","Card Type":"4 PORT 100GE CFP2 XMA","Card Name (Part #, Serial #, CLEI)":"Daughter Card Slot - 2/1 (3HE08632AARA01, NS154463169, IPUCBG81AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/22","Card Category":"Control Proce","Card Type":" CPM X20","Card Name (Part #, Serial #, CLEI)":"Card Slot - B (3HE07116AARB01, NS144768025, IPUCA9T1AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/3","Card Category":"IO","Card Type":"XCM X20","Card Name (Part #, Serial #, CLEI)":"Card Slot - 3 (3HE06936AARB01, NS153765817, IPUCA9L1AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/21","Card Category":"Control Proce","Card Type":" CPM X20","Card Name (Part #, Serial #, CLEI)":"Card Slot - A (3HE07116AARB01, NS144768009, IPUCA9T1AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/2","Card Category":"Daughter Card","Card Type":"40 PORT 10GE SFP+ XMA","Card Name (Part #, Serial #, CLEI)":"Daughter Card Slot - 2/2 (3HE07297AARB01, NS144961602, IPU3A40JAA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/2","Card Category":"IO","Card Type":"XCM X20","Card Name (Part #, Serial #, CLEI)":"Card Slot - 2 (3HE06936AARA01, NS132763607, IPUCA9L1AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/1","Card Category":"IO","Card Type":"XCM X20","Card Name (Part #, Serial #, CLEI)":"Card Slot - 1 (3HE06936AARA01, NS132763587, IPUCA9L1AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/4","Card Category":"IO","Card Type":"XCM X20","Card Name (Part #, Serial #, CLEI)":"Card Slot - 4 (3HE06936AARB01, NS153765870, IPUCA9L1AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/1","Card Category":"Daughter Card","Card Type":"40 PORT 10GE SFP+ XMA","Card Name (Part #, Serial #, CLEI)":"Daughter Card Slot - 1/1 (3HE07297AARA01, NS14236K621, IPU3A40JAA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/3","Card Category":"Daughter Card","Card Type":"4 PORT 100GE CXP XMA","Card Name (Part #, Serial #, CLEI)":"Daughter Card Slot - 3/2 (3HE07299AARB01, NS142668888, IPU3A4YJAA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1},{"Node Name":"hrn3-th-7950XRS","Shelf Type":"7950-XRS20","Slot #":"1/4","Card Category":"Daughter Card","Card Type":"4 PORT 100GE CFP2 XMA","Card Name (Part #, Serial #, CLEI)":"Daughter Card Slot - 4/2 (3HE08632AARA01, NS151168037, IPUCBG81AA)","Card Software Version":"TiMOS-C-13.0.R7 ","Total IOM slots":20,"IOM slots used":4,"IOM slots free":16,"IOM slots used %":20.0,"Shelf slots removable":1}]

Gary Schlosberg
17 May 2016, 11:49 AM
With which version of Ext JS are you seeing this issue? Did that version of PivotGrid come from mzSolutions or from Sencha?

jxyiliu
17 May 2016, 11:56 AM
Hi Gary,

The pivotGrid was coming from mzSolutions. I knew the pivotGrid version is outofdate, but as this issue is reported by our client, and we pretty much can not update pivotGrid version, but we can update their jsp pages on the fly so if we can have a walk around on script side, it will be most preferable solution for us.

Thanks

Yi

Gary Schlosberg
17 May 2016, 3:14 PM
Which specific version of Ext JS is this?

jxyiliu
18 May 2016, 4:35 AM
Hi Gary,

The ExtJs version is: 4.2

Thanks in advance for your coming help.

K.R.


Which specific version of Ext JS is this?