PDA

View Full Version : Grid columns don't line up with the grid panel in Chrome



russeb
5 Nov 2013, 10:27 AM
I have an odd issue wherein an Ext.grid.Panel has columns which fail to align with their column headers. This is specific to Chrome. This is in 4.2.1.

Here's what it looks like in chrome:
46708

And in firefox:
46709


Here is my code:


var summaryGrid = Ext.create('Ext.grid.Panel', {
// title: "message-summary-grid",
store: 'summary-data',
stripeRows: true,
// animCollapse: true,
columnLines: true,
autoShow: true,
loadMask: true,
// viewConfig: {forceFit: true},
// forceFit: true,
columns: [
{header: 'Code', dataIndex: 'code', width: 65},
{header: 'Type', dataIndex: 'type'},//, width: 65},
{header: 'Attributes', dataIndex: 'attributes'},//, width: 100},
{header: 'Count', dataIndex: 'count'},//, width: 65},
{header: 'Text', dataIndex: 'text', flex: 1},//, width: 525},
{
header: 'Waived',
dataIndex: 'waived'//,
// width: 65
},
{
xtype: 'actioncolumn',
items: [{
icon: './images/add.png',
tooltip: "Modify the waivers associated with this row.",
handler: function(grid, rowIndex, colIndex){
//alert("Button clicked");
var record = summaryGrid.getStore().getAt(rowIndex);
WaiverRowIndex = rowIndex;
WaiverCode = record.get("code");
WaiverSource = "context";
console.log(WaiverCode);
waiverWin.show();
}
},
{
icon: './images/remove.png',
tooltip: "Modify the waivers associated with this row.",
handler: function(grid, rowIndex, colIndex){
//alert("Button clicked");
var record = summaryGrid.getStore().getAt(rowIndex);
WaiverRowIndex = rowIndex;
WaiverCode = record.get("code");
WaiverText = record.get("text");
WaiverSource = "context";
WaiverType = "ALL";
Ext.MessageBox.confirm('Confirm', 'Remove all waivers on messages with Code: '+WaiverCode, removeWaiver);


}
}]
},
],
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 25,
store: 'summary-data',
displayMsg: 'Displaying messages {0} - {1} of {2}',
emptyMsg: "No messages to display"
}),
listeners: {
itemdblclick: function(dv, record, item, index, e) {
CodeRegexp = record.get("code");
TypeRegexp = record.get("type");
globalRefresh("true");
}
},
viewConfig: {
getRowClass: function(record) {
if(record.get('type') == "Error"){
return 'error-row';
}else if(record.get('type') == "Warning"){
return 'warning-row';
}else{
return 'normal-row';
}
}
}




I would greatly appreciate any help anyone might have regarding why Chrome is rendering this grid so strangely. Thank you.

Gary Schlosberg
7 Nov 2013, 9:43 AM
That is indeed strange. Any chance you can post a stand-alone test case so we can have a play with it?