PDA

View Full Version : [CLOSED][3.0RC1] TabPanel in IE8



mtoddsmith
28 Apr 2009, 11:28 AM
The TabPanel demo on http://extjs.com/deploy/dev/examples/tabs/tabs.html includes some extra spacing below the tabs on IE8.

evant
28 Apr 2009, 8:00 PM
Not seeing it, either in quirks or standard mode.

mtoddsmith
29 Apr 2009, 6:55 AM
I checked it on two XP systems with IE8 and did not see the problem.

I'm running Vista w/IE8. I will check a few more boxes around the office and see if I can reproduce it.

BTW the gap starts out open but then opens and closes when I hover the mouse over a tab in the panel.

EDIT: I tested it on another Vista x64 w/IE8 and did not see the bug so I'm guessing its something screwy with my box.

aconran
4 May 2009, 10:47 AM
Cannot reproduce this issue. Did you ever find out what was causing this? Did you have any particular plugin installed?

mtoddsmith
4 May 2009, 1:38 PM
I disabled all of my Toolbars and Extensions in IE8 and the problem still persisted.

I did a bit of trial and error and the culprit seems to be the x-tab-strip-over class. Disabling that stops the behavior. It doesn't look like the CSS properties make a difference (ie removing the x-tab-strip-over styles) so I assume it must be something to do with the Ext.Fly method. I wasn't able to pin-point the exact cause.

We're also evaluating a CMS from SalesLogix which appears to use extjs and I see the same behavior in their application. See attachment.

I would be more than happy to run some tests if you can suggest any changes.

The problem goes away in IE8 if I enable Compatibility View.



initTab : function(item, index){
var before = this.strip.dom.childNodes[index];
var p = this.getTemplateArgs(item);
var el = before ?
this.itemTpl.insertBefore(before, p) :
this.itemTpl.append(this.strip, p);

//Ext.fly(el).addClassOnOver('x-tab-strip-over');

if(item.tabTip){
Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
}
item.tabEl = el;

item.on('disable', this.onItemDisabled, this);
item.on('enable', this.onItemEnabled, this);
item.on('titlechange', this.onItemTitleChanged, this);
item.on('iconchange', this.onItemIconChanged, this);
item.on('beforeshow', this.onBeforeShowItem, this);
},