[Solved]Missing Column Header in EditorGrid

[navin.kare]

Hi,

I am facing a wierd issue of column header not showing up in FF and IE.



function buildPaymentSummaryGrid(){
var paymentSummaryGS = new Ext.grid.GroupSummary();
// create the Data Store
var paymentSummarySource = new Ext.data.GroupingStore({
// load using HTTP
url:'/cts/indemnityPayments.cpic?_event_=getPaymentSummary',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'paymentSummaryData'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'groupingField', mapping: 'groupingField'},
{name: 'itemId', mapping: 'itemId', type:'float'},
{name: 'netPayment', mapping: 'netPayment', type:'float'},
{name: 'GCA', mapping: 'GCA', type:'float'}
]),
sortInfo:{field: 'itemId', direction: "ASC"},
groupField:'groupingField'
});

function getTotal(v, params, data) {
return 'Total';
}

var paymentSummaryGrid = new Ext.grid.EditorGridPanel({
title: 'Payment Summary',
store: paymentSummarySource,
loadMask: true,
columns: [
{header: "Project", width: 1, dataIndex: 'groupingField', sortable: false},
{header: "Claim Item Id 1", width: 40, dataIndex: 'itemId', sortable: true, summaryRenderer:getTotal,align:'left',
renderer: function(value) {
return '<a href="" >' + value + '</a>'
}
},
{header: "Total Net Payment", width: 40, dataIndex: 'netPayment', sortable: true, summaryType:'sum', align:'right',
renderer:function(value) {
return Ext.util.Format.usMoney(Ext.num(value, 0));
}
},
{header: "GCA", width: 40, dataIndex: 'GCA', sortable: true, summaryType:'sum', align:'right',
renderer:function(value) {
return Ext.util.Format.usMoney(Ext.num(value, 0));
}
}
],
renderTo:'paymentSummaryDIV',
height:200,
width:300,
plugins: paymentSummaryGS,
view: new Ext.grid.GroupingView({
forceFit:true,
showGroupName: false,
enableNoGroups:false, // REQUIRED!
hideGroupedColumn: true,
header:'Summary'
}),
frame:true,
clicksToEdit: 1,
collapsible: false,
animCollapse: true,
trackMouseOver: false,
//enableColumnMove: false,
title: 'Payment Details',
iconCls: 'icon-grid'

});

paymentSummarySource.on("beforeload", function() {
//alert('before load');
Ext.get(grid.id).dom.style.cursor = "wait";
});
paymentSummarySource.on("load", function() {
//alert('done loading');
Ext.get(grid.id).dom.style.cursor = "pointer";
grid.setTitle("Test Title");
});
paymentSummarySource.load();
}

Also my grouping text is aligned centered.

Thanks for looking.

Navin

Solution:

The renderedTO DIV was inside a <td> tag. I had to create keep it <div> in seperate table.