PDA

View Full Version : [CLOSED] grouped header grid issue



zhulijun
1 Apr 2013, 1:31 AM
I have defined a grouped header grid as below.
However, something is wrong as the attached image.
I'm using Ext JS 4.1

Please help,
Thanks,
zhu


42803


code:



Ext.onReady(function() {
Ext.QuickTips.init();


var myData = [[1, '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Category 1', 'Country 1', 0]
, [2, 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Category 2', 'Country 10', 0]
, [3, 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Category 3', 'Country 9', 0]];


//
var fields = [{
"name" : "RD4434",
"type" : "float"
}, {
"name" : "RD4435",
"type" : "string"
}, {
"name" : "RD4436",
"type" : "float"
}, {
"name" : "RD4418",
"type" : "float"
}, {
"name" : "RD4419",
"type" : "float"
}, {
"name" : "RD4420",
"type" : "float"
}, {
"name" : "RD4421",
"type" : "string"
}, {
"name" : "RD4422",
"type" : "string"
}, {
"name" : "RD4427",
"type" : "float"
}, {
"name" : "RD4428",
"type" : "float"
}, {
"name" : "TD0506",
"type" : "float"
}];


var columns = [{
"filter" : false,
"text" : "g01",
"columns" : [{
"filter" : false,
"text" : "g0101",
"columns" : [{
"sortable" : true,
"align" : "center",
"dataIndex" : "RD4418",
"text" : "i010101",
"width" : 100
}]
}, {
"filter" : false,
"text" : "g0101",
"columns" : [{
"filter" : false,
"text" : "g010201",
"columns" : [{
"sortable" : true,
"align" : "center",
"dataIndex" : "RD4421",
"text" : "i01020101",
"width" : 100
}]
}]
}]
}, {
"filter" : false,
"text" : "g02",
"columns" : [{
"filter" : false,
"text" : "g0201",
"columns" : [{
"sortable" : true,
"align" : "center",
"dataIndex" : "RD4436",
"text" : "i020101",
"width" : 100
}]
}]
}, {
"filter" : false,
"text" : "g03",
"columns" : [{
"sortable" : true,
"align" : "center",
"dataIndex" : "RD4427",
"text" : "i0301",
"width" : 100
}]
}, {
"filter" : false,
"text" : "g04",
"columns" : [{
"filter" : false,
"text" : "g0401",
"columns" : [{
"filter" : false,
"text" : "g040101",
"columns" : [{
"filter" : false,
"text" : "g04010101",
"columns" : [{
"filter" : false,
"text" : "g0401010101",
"columns" : [{
"sortable" : true,
"align" : "center",
"dataIndex" : "RD4428",
"text" : "i040101010101",
"width" : 100
}]
}]
}]
}]
}]
}, {


"sortable" : true,
"align" : "center",
"dataIndex" : "TD0506",


"text" : "i05",
"width" : 100
}];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields : fields,
data : myData
});


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store : store,
columns : columns,
title : 'Multiple header',
viewConfig : {
stripeRows : true
}
});
Ext.widget('viewport', {
layout : 'fit',
items : [grid]
});


});

mitchellsimoens
2 Apr 2013, 2:16 PM
Looks like the framework isn't calculating the header sizing properly. Will open a bug for this.