PDA

View Full Version : TabPanel IE resizing problem



MattBass
29 Dec 2009, 11:27 AM
Hi guys. I've been working with ExtJS for about a month now. I'm an experimented software/web developer, but not JavaScript guru at all.

So here's my problem. Basically, I want a TabPanel to fill the entire width of my page and adjust to this page when ever it is resized. It's the exact same behavior you can see here: http://www.yui-ext.com/deploy/dev/docs/ when you open document for many classes at the same time.

I've been trying many different approaches to achieve my goal, but here's where I am now (code following...):


An HTML page with two divs, one inside another.
A simple panel with layout set to 'fit' that is rendered to the "inside" div.
A TabPanel which is the only item of the above panel.


HTML code for the divs


<div id='roger' style='position:relative; width: 100%; height: 100%;'>
<div id='contentTabPanel'
style='overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0;'/>
</div>


'fit' Panel code


var contentFitPanel = new Ext.Panel({
renderTo: 'contentTabPanel',
layout: 'fit',
items: [
contentTabPanel
]
});


Code for TabPanel and test tabs


var contentTabPanel = new Ext.TabPanel({
resizeTabs: true, // turn on tab resizing
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,
autoWidth: true,
height: 250,
defaults: {autoScroll: true},
activeTab: 0,
plugins: new Ext.ux.TabCloseMenu()
});

// tab generation code
var index = 0;
while(index < 7){
addTab();
}
function addTab(){
contentTabPanel.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Bob',
closable: true
}).show();
}


I also added this code and now it works great in Firefox 3.5 and Chrome:


window.onresize = function(event) {
contentFitPanel.doLayout();
contentTabPanel.doLayout();
}


Right now, the problem in IE 8 is that it works great when I make it wider, but not when I make it narrower. The TabPanel does not resize at all and the right part becomes invisible.

I hope I'm clear enough. Thanks a lot for your help. I'll be happy to answer any question you might have.

MattBass
30 Dec 2009, 5:32 AM
No one's got a clue?

If you guys think I'm totally on the wrong track with that, please let me know. I also gave a shot at the "fitToParent" extension without success...

Thanks again!

Condor
30 Dec 2009, 5:42 AM
The FitToParent plugin should work in this case.

ps. width:100%+height:100% don't always do what you want. Are you sure the div has the size you planned?

MattBass
30 Dec 2009, 5:44 AM
You're about that, but didn't find any problems with the divs... I will take a look again though.

I'll also give a new try to the FitToParent and see what I can get. I'll let you know how things turn out during the day. Thanks!

MattBass
30 Dec 2009, 6:29 AM
Ok. Here' what I'm trying now.

I removed my previous divs and replaced it with a simple div with a 100% width:


<div id='contentTabPanel' style='overflow: hidden; width: 100%; height: 600px' />

I also changed the way the TabPanel is added to the "fit panel". This was needed in order the declare the "fit panel" before the TabPanel and set the parent into the plugin correctly. Here's the complete code:



var contentFitPanel = new Ext.Panel({
renderTo: 'contentTabPanel',
cls: 'contentFitPanel',
border: false,
layout: 'fit'
});

var contentTabPanel = new Ext.TabPanel({
resizeTabs: true, // turn on tab resizing
minTabWidth: 85,
tabWidth: 115,
plain: true,
enableTabScroll: true,
autoWidth: true,
height: 250,
defaults: {autoScroll: true},
activeTab: 0,
plugins: [new Ext.ux.plugins.FitToParent(contentFitPanel), new Ext.ux.TabCloseMenu()]
});

// tab generation code
var index = 0;
while(index < 7){
addTab();
}
function addTab(){
contentTabPanel.add({
title: 'New Tab ' + (++index),
iconCls: 'tabFile',
html: 'Bob',
closable: true
}).show();
}

// Insert the TabPanel into the "fit panel"
contentFitPanel.add(contentTabPanel);
contentFitPanel.doLayout();


But after doing this, I get the following error: "this.fitToElement is null" which comes from the FitToParent plugin on this line:



fitSizeToParent: function() {
var pos = this.getPosition(true), size = this.fitToElement.getViewSize(); // <<----- HERE
this.setSize(size.width - pos[0], size.height - pos[1]);
}


Any ideas?

Condor
30 Dec 2009, 6:33 AM
Your problem is not that the tabpanel doesn't fit the panel, it's that the panel doesn't fit the div.

That means that you should use the FitToParent plugin on the panel and not on the TabPanel:

var contentFitPanel = new Ext.Panel({
renderTo: 'contentTabPanel',
cls: 'contentFitPanel',
border: false,
layout: 'fit',
plugins: [new Ext.ux.plugins.FitToParent()]
});

var contentTabPanel = new Ext.TabPanel({
resizeTabs: true, // turn on tab resizing
minTabWidth: 85,
tabWidth: 115,
plain: true,
enableTabScroll: true,
autoWidth: true,
height: 250,
defaults: {autoScroll: true},
activeTab: 0,
plugins: [new Ext.ux.TabCloseMenu()]
});

MattBass
30 Dec 2009, 6:49 AM
Good point. ;)

Here's my new code:



var contentTabPanel = new Ext.TabPanel({
resizeTabs: true, // turn on tab resizing
minTabWidth: 85,
tabWidth: 115,
plain: true,
enableTabScroll: true,
autoWidth: true,
height: 250,
defaults: {autoScroll: true},
activeTab: 0,
plugins: [new Ext.ux.TabCloseMenu()]
});

var contentFitPanel = new Ext.Panel({
renderTo: 'contentTabPanel',
layout: 'fit',
cls: 'contentFitPanel',
border: false,
plugins: [new Ext.ux.plugins.FitToParent(Ext.get('contentTabPanel'))],
items: [contentTabPanel]
});


I still get the same behavior in IE8 (don't have other versions of IE to test at the moment): Expanding works perfectly, but retracting (contracting) doesn't work at all. The div (and contained elements) always keep the highest value that they've at for width since the last browser refresh (I hope I'm clear). ;)

I tried looking at the value of Ext.get('contentTabPanel').offsetWidth ... but it's undefined.

Condor
30 Dec 2009, 6:57 AM
Weird... That normally only happens when the parent isn't overflow:hidden.

ps. You don't need to specify the parent for the FitToParent plugin if it also is the renderTo target.

MattBass
30 Dec 2009, 7:36 AM
You don't need to specify the parent for the FitToParent plugin if it also is the renderTo target.

Mmmmmmm... when I do that, I get the following error: "c.getDomPositionEl is not a function" and nothing appears on screen. Could this be a hint toward the solution? I guess it's not a standard behavior. /:)

Condor
30 Dec 2009, 8:43 AM
getDomPositionEl was replaced with getPositionEl in Ext 3.1.

(I still need to update the plugin code for that change)

MattBass
30 Dec 2009, 9:22 AM
Nice, thanks. It fixed the JavaScript error, but I still have the same behavior in IE 8.

I'm gonna put this on the ice for a while, it's taking too much time right now. I'll come back to it later. Meanwhile, if you have any idea, I'll be happy to hear it.

Thanks again!

Junneliang
25 Jun 2010, 1:56 PM
I met the similar situation where IE expand nicely for the tabs but not when shrinking. After couple days debugging, I found the solution and like to post it to Ext users if you encounter similar situation.

The solution is to remove 'autoWidth : true' from TabPanel configuration. If you use the default option (autoWidth: false), the tab panel width will be managed by parent container. Using autoWidth: true, tabPanel width is managed by browser auto detection. For some reason, IE is not detecting the width correctly when shrinking.