[2.0.1] My Column Headers dissappear in IE (fine in ff) when in panel/window?

[rickcr]

I'm an Extjs newbie, so I could be doing something really dumb here. I have tried searching the forums for this issue (was having the same issue in 2.0.. just upgraded thinking it might help).

I'm creating a window and adding a panel to it. Part of the panel is some html content in a div and then there is an extjs grid below it.

For some reason when the grid loads in the panel in IE the column header text does not show up, yet in Firefox it's just fine. No errors are thrown in firebug either. The rest of the grid and rows looks just fine as well. It's just the stinkin' column headers.

Interestingly, if I don't have class="x-hidden" on the div on the page, I can see the headers in IE on the page (obviously before the new window is formed) so I don't think it's a css issue? It's only when it tries to show in the panel/window (triggered by a button onclick).

I can see the actual header bar above the grid - it's just that the labels are missing (and they don't highlight or anything either.)

I've tried using fit layout and border layout.

Below is some of the code (but obviously something else might be interfering? I know this is a silly border attempt below - just trying to narrow things down to what's causing the problem):

page:
-----
<div id="stuff" class="x-hidden">
    <div> <!-- html here --> </div>
    <div id="entities-grid"></div>
</div>

----
snippet of creating the window:

var center = new Ext.Panel({
    region: 'center',
    contentEl: 'stuff',
    split: true,
    width: 880,
    collapsible: true,
    margins: '3 0 3 3',
    cmargins: '3 3 3 3'
});

entitySearchDialog = new Ext.Window( {
    title: 'Entity Search',
    closable: true,
    layout: 'border', 
    width:900,
    height: 450,
    items: [ center ],
    plain:true
} );

--------
some grid code:

var grid = new Ext.grid.GridPanel({
    store: dataStore,
    cm: columnModel,
    autoExpandColumn: 'entityNameid',
    loadMask: true,
    width:878,
    height:305,
    bbar: new Ext.PagingToolbar({
        pageSize: 25,
        store: dataStore,
        displayInfo: true,
        displayMsg: 'Displaying entities {0} - {1} of {2}',
        emptyMsg: "No entities to display"
    })
});

grid.render('entities-grid');

[rickcr]

Just wanted to apologize for this post, without doing 'total' diligence. I assumed since I was seeing the headers fine in IE before the new window was formed (and was using the default ext-all.css style sheet), that it couldn't be a css issue (well, we know what they say about 'assumptions'). Somehow, however, when my new window is created, I have some style that was conflicting with the headers in the ext.Window, but ONLY in IE (I thought firefox was supposed to be the picky one?). I now have to figure out what the issue is, but it's obviously a css conflicting problem.

I ended up making a complete dummy example outside of my application and of course it worked fine. I 'should' have done that before posting - so my apologies. Again, to the noobs (myself included), pull out everything and isolate in a standalone test case before posting here. I should have followed my own advice.

Thanks again to the devs for an awesome piece of work.