EXTJS 3.4: Missing header in grid panel when number of columns grows

EXTJS 3.4: Missing header in grid panel when number of columns grows

I have an application developed using extjs 3.4. We use Grid panel and
populate rows using array store. The array size is huge, 68 columns. Till
around 50 columns the header was displaying right. But when i start adding
more columns, missing headers. I have a main headers(3 of them) and
subclassed to 4 sub headers and each sub headers has it own headers.
When I inspect the HTML component using debugger tools, i see that the
text is available in the component. Just that it is not displayed on the
screen. I am using IE9. I have tried both in non compatible and compatible
views.
Ext.each(subgroup2, function(subhdr2){
fields.push({
type: 'string',
name: headerText + subhdr2
});
columns.push({
dataIndex: headerText + subhdr2,
header:
(trimHdr(subhdr2)=="img")?
setHistCol(headerText+subhdr2):subhdr2,
headerAsText: true,
width: setWidth(subhdr2),
//width:
(trimHdr(subhdr2)=="img")?3:60,
// flex:
(trimHdr(subhdr2)=="img")?0.2:1,
// minWidth: setWidth(subhdr2), //PL change from width to minWidth
menuDisabled: true,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
//console.info("renderer subhdr2: "+ subhdr2);
//if (colIndex==28){ //
if(subhdr2 == 'PR-img'){
return String.format(
'<span id="histLink"
class="headerExpandImg"
title="Click to open
history screen"></span>');
} else {
if(subhdr2.indexOf('Accts')
> 0){
return String.format(
Ext.util.Format.number(value,
"123,456"));
}else if(subhdr2=="Change
in Long Value" ||
subhdr2=="Change in
Price"){
return (value < 0) ?
String.format('<font
class="negCell">'+Ext.util.Format.number((value*-1),
"(12.00%)")+'</font>')
:
String.format(Ext.util.Format.number(value,
"12.00%"));
}else{
return (value < 0) ?
String.format( '<font
class="negCell">'+
Ext.util.Format.number((value*-1)/million,
"(1,234.00)")
+'</font>')
:
String.format(
Ext.util.Format.number(value/million,
"123,456.00"));
}
}
},
listeners : {
scope : this,
click : function(column, grid,
rowIndex, eventObj){
//if (column.id==28){
if(subhdr2 ==
'PR-img'){
var record =
grid.getStore().getAt(rowIndex);
var baclass =
((rowIndex==0)&&(record.get("broadAssetCode")==""))?tripWireTab.searchCriteria.baClass:record.get("broadAssetCode");
var prodtypecode =
((rowIndex==0)&&(record.get("prodTypeCode")==""))?tripWireTab.searchCriteria.productType
:record.get("prodTypeCode");
var srcLink = (
(rowIndex==0)&&(record.get("broadAssetCode")=="")&&(record.get("prodTypeCode")==""))?"prodtype":"security";
var bastore =
tripWireTab.toolBarRef.getBroadAssetStore();
var collection =
bastore.query('code',
baclass, true,
false);
var badesc =
((collection.items[0]!=null)||(collection.items[0]!=undefined))
?collection.items[0].get('Description'):"N/A";
var proddesc =
Ext.util.Format.stripTags(record.get("Security
Description"));
var histTitle =
(srcLink=="prodtype")?
String.format(
"Broad Asset Class
=
"+Ext.util.Format.capitalize(
badesc) + "<br
/>"+ "Product Type
= "+proddesc )
:
String.format(
"Security
=
"+
proddesc
+"
("+record.get("securityNo")+")");
callHistoryService(srcLink,
false, baclass,
prodtypecode,
record.get("securityNo"),histTitle);
}
}
}
});
}); // eof