PDA

View Full Version : Missing Grid column Headers IE7



mdlincoln
25 Nov 2007, 9:53 AM
I have recently finished converting this application from ExtJS 1.1 to ExtJS 2.0rc1 and the grid renders correctly in FF2 but in IE7, the grid column headers are missing and nothing I try will get them to render. The code is virtually the same as the ExtJS 1.1 version of the application. If you look at the attached images, you will also notice that the IE7 version of the grid is aligned one pixel off under the drop down lists. Very wierd. Anybody else seen this? Any solutions? Is this a bug?

Mark




// Define the columns for the Part grid.
oPartColumns = new Ext.grid.ColumnModel( [

{ header : "Supplier", width : 070, dataIndex : "supplier" },
{ header : "Type", width : 080, dataIndex : "vehicle" },
{ header : "Location", width : 115, dataIndex : "location" },
{ header : "Brand", width : 140, dataIndex : "brand" },
{ header : "Part Number", width : 090, dataIndex : "part_no" },
{ header : "Part Type", width : 220, dataIndex : "part_type" },
{ header : "Qty", width : 040, dataIndex : "qty" },
{ header : "Comment", width : 250, dataIndex : "comment" },
{ header : "Application", width : 200, dataIndex : "application" }

] );

// Assign a column renderer to search the data store containing the list
// of supplier codes and full names to create the quick tips to display
// the full supplier name when the user moves the mouse over the column
// cell containing the supplier code.
oPartColumns.setRenderer( 00, function( xData, oMeta, oRecord, nRow, nColumn, oStore ) {

var oSupplier; // Reference to the record containing the current supplier
var sSupplier; // Full name of the current supplier

// Get the record containing the current supplier using the specified
// supplier code.
oSupplier = oSuppliers.getById( Ext.util.Format.trim( xData ) );

// If the current supplier was found...
if ( oSupplier ) {

// Retrieve the full name of the supplier.
sSupplier = oSupplier.get( "data" );

}

else { // Current supplier was NOT found...

sSupplier = "Supplier name unknown"

}

// Assign the attribute for the QuickTip to display the full supplier
// name that matches the current supplier code.
oMeta.attr = 'ext:qtip="' + sSupplier + '"';

// Return the supplier code to diaply in the column cell.
return xData;

} );

// Enable the default sorting.
oPartColumns.defaultSortable = true;

// Create the part grid.
oPartGrid = new Ext.grid.GridPanel( {

store : oParts,
cm : oPartColumns,
renderTo : "grdPart",
layout : "fit",
width : 980,
height : 500,
selModel : new Ext.grid.RowSelectionModel( { singleSelect : true } ),
loadMask : true

} );

// Render the Part grid in the page.
oPartGrid.render();

25 Nov 2007, 10:25 AM
do they show up if you resize the window? if so, it's a known bug.

mdlincoln
25 Nov 2007, 10:59 AM
Nope, nothing I have tried gets them to show up. Is there a workaround for the bug you are refering to? I have run out of ideas and I would like to find at least a temporary resolution while the bug is being fixed.

Mark

rtsang
27 Nov 2007, 9:06 AM
Try this in your css definition:

.x-grid3-header-offset {
text-align:left;
}

The problem seems to stem from IE's propensity to center things by default when other browsers don't. The .x-grid3-header-offset div has a width of 10000px, so the headers are centered in there, pushing it ~5000px to the right. Another method (which I've done, because I want to put a little icon to the right of the headers) is:

.x-grid3-header-offset table {
float:left;
}

and in javascript, during the grid creation:

Ext.DomHelper.append(grid.body.child('.x-grid3-header-offset'),'<a href="resources/txls/tableData.txls" style="float:left;"><img src="resources/images/icon_excel.png"></a>');

to get something that looks like the attached shot.

Hope this helps!

Ryan

heidtmare
27 Nov 2007, 9:39 AM
rtsang: im impressed by your graph grid combo. is that graph dynamic, or is it a static image?

rtsang
27 Nov 2007, 9:52 AM
Thanks! It's dynamic - using FusionCharts. It's such a pain, though, embedding flash objects in ext windows. I'd be interested in any ajax libraries that can generate charts as easily, but so far I haven't found any as flexible.

27 Nov 2007, 10:01 AM
Try emprise charts