PDA

View Full Version : [CLOSED][3.1] tabpanel.el.boxWrap() loses containment when inside a border layout



zhegwood
24 Dec 2009, 10:36 AM
Ext version tested:

Ext 3.1.0


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

IE8
FF3 (firebug 1.3.0.10 installed)


Operating System:

Vista


Description:

When you boxWrap() a tab panel that is inside a border layout, the boxwrap loses containment


Test Case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Zach's Playground</title>
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
<link rel="stylesheet" href="ext-3.0.3/resources/css/ext-all.css"type="text/css" />
</head>
<body></body>
</html>
<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.namespace("AV");

AV.ViewPort = new Ext.Viewport({
layout: "fit",
items: new Ext.Container({
layout: "border",
items: [
{
region:"north",
height: 120,
items: new Ext.TabPanel({
items: [
{ title: "tab 1",html: "tab 1" },
{ title: "tab 2",html: "tab 2" }
],
listeners: {
render: function(obj) {
obj.el.boxWrap();
},
scope: this
}
})
},
{
region: "center"
}
]
})
});
});
</script>


See this URL : http://


Steps to reproduce the problem:

save above code as html file
go to the page
open another tab (or refresh another tab w/ F5)
go back to the other page


The result that was expected:

tab panel w/ wrap would look the same


The result that occurs instead:

tab panel wrap loses containment


Screenshot or Video:

attached


Debugging already done:

I had a fairly extensive layout when I first saw it, but stripped it down to this code and the problem is easily reproducable


Possible fix:

not provided


I crated a thread about this, so I'm not sure if you want to merge them or whatever:
http://www.extjs.com/forum/showthread.php?t=88472

evant
24 Dec 2009, 2:08 PM
This isn't a bug. By calling boxWrap, you're messing with the DOM structure of the component, meaning that the outer-most component of the element isn't what it once was.

Either:
a) Don't make the tabs directly the north region (over-nest on purpose)
b) Modify the object so it points to the new element correctly.

Marking as closed.

zhegwood
24 Dec 2009, 2:43 PM
Tried a... Same result.

Not sure what you mean by B.

It seems odd that regular panels work fine, and even tab panels are fine outside of a border layout. I'm not changing the outer-most compenent of the tab panel at all... I'm putting the component inside of another container (the wrap). It seems like a bug to me, being that it works with regular panels inside or outside of a border layout and with tab panels outside of a border layout.

evant
24 Dec 2009, 2:46 PM
Of course you are. Look at the markup before and after you call boxWrap().

You're calling the method directly on the element, the component knows nothing about it, so it doesn't know how to resize with the new markup.

zhegwood
24 Dec 2009, 3:25 PM
Of course I'm manipulating the dom, but the markup for the tab panel doesn't change at all. The only difference is the wrapping container. Without boxWrap, the container is the north panel's x-border-panel element. With the boxwrap, the container is x-box-mc element. Everything related to the actual tabpanel is unchanged.

I guess I'm wondering if there's a way to make this work as intended. I tried over-nesting and then calling obj.el.up(".nesting-ct").boxWrap() then tried the same thing with the addition of calling obj.el.up(".nesting-ct").doLayout() but got the same result in both cases. I also tried simply over-nesting and calling obj.el.boxWrap().

Edit... Tested this in Safari 3.2.1 Win too and don't get this behavior. Weird.

Edit again... Scratch that. Anytime a doLayout() is called it hoses up.

Anyway, here's the markup. Like I said, the actual tab panel markup doesn't change at all... All that changes is its container.


<div id="ext-comp-1005" style="height: 120px; left: 0px; top: 0px; width: 1586px;" class=" x-border-panel">




<div id="ext-comp-1002" class=" x-tab-panel">
<div class="x-tab-panel-header x-unselectable" id="ext-gen12" style="-moz-user-select: none;">
<div class="x-tab-strip-wrap" id="ext-gen15">
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen17">
<li id="ext-comp-1002__ext-comp-1003" class="">
<a class="x-tab-strip-close" id="ext-gen20" />
<a href="#" class="x-tab-right" id="ext-gen21">
<em class="x-tab-left">
<span class="x-tab-strip-inner"><span class="x-tab-strip-text ">tab 1</span></span>
</em>
</a>
</li>
<li id="ext-comp-1002__ext-comp-1004" class="">
<a class="x-tab-strip-close" id="ext-gen22" />
<a href="#" class="x-tab-right" id="ext-gen23">
<em class="x-tab-left">
<span class="x-tab-strip-inner"><span class="x-tab-strip-text ">tab 2</span></span>
</em>
</a>
</li>
<li class="x-tab-edge" id="ext-gen18">
<span class="x-tab-strip-text"></span>
</li>
<div class="x-clear" id="ext-gen19" />
</ul>
</div>
<div class="x-tab-strip-spacer" id="ext-gen16" />
</div>
<div class="x-tab-panel-bwrap" id="ext-gen13">
<div class="x-tab-panel-body x-tab-panel-body-top" id="ext-gen14" />
</div>
</div>




</div>



<div id="ext-comp-1005" style="height: 120px; left: 0px; top: 0px; width: 1586px;"
class=" x-border-panel">
<div class="x-box" id="ext-gen24">
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc" />
</div>
</div>
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">




<div id="ext-comp-1002" class=" x-tab-panel">
<div class="x-tab-panel-header x-unselectable" id="ext-gen12" style="-moz-user-select: none;">
<div class="x-tab-strip-wrap" id="ext-gen15">
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen17">
<li id="ext-comp-1002__ext-comp-1003" class="">
<a class="x-tab-strip-close" id="ext-gen20" />
<a href="#" class="x-tab-right" id="ext-gen21">
<em class="x-tab-left">
<span class="x-tab-strip-inner"><span class="x-tab-strip-text ">tab 1</span></span>
</em>
</a>
</li>
<li id="ext-comp-1002__ext-comp-1004" class="">
<a class="x-tab-strip-close" id="ext-gen22" />
<a href="#" class="x-tab-right" id="ext-gen23">
<em class="x-tab-left"><span class="x-tab-strip-inner">
<span class="x-tab-strip-text ">tab 2</span></span>
</em>
</a>
</li>
<li class="x-tab-edge" id="ext-gen18">
<span class="x-tab-strip-text"></span>
</li>
<div class="x-clear" id="ext-gen19" />
</ul>
</div>
<div class="x-tab-strip-spacer" id="ext-gen16" />
</div>
<div class="x-tab-panel-bwrap" id="ext-gen13">
<div class="x-tab-panel-body x-tab-panel-body-top" id="ext-gen14" />
</div>
</div>





</div>
</div>
</div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc" />
</div>
</div>
</div>
</div>

evant
24 Dec 2009, 4:53 PM
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.namespace("AV");

AV.ViewPort = new Ext.Viewport({
layout: "fit",
items: new Ext.Container({
layout: "border",
items: [{
region: "north",
height: 120,
items: new Ext.TabPanel({
items: [{
title: "tab 1",
html: "tab 1"
}, {
title: "tab 2",
html: "tab 2"
}],
listeners: {
render: function(c){
c.el = c.positionEl = c.resizeEl = c.el.boxWrap();
//c.el.boxWrap();
},
scope: this
}
})
}, {
region: "center"
}]
})
});
});

zhegwood
28 Dec 2009, 8:20 AM
Awesome, thank you!