Thank you for reporting this bug. We will make it our priority to review this report.
Ext User
Ext version tested: Adapter used: css used: Browser versions tested against: IE8 FF3 (firebug 1.3.0.10 installed) Operating System: Description: When you boxWrap() a tab panel that is inside a border layout, the boxwrap loses containment Test Case:
Code:
<!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: 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: http://www.extjs.com/forum/showthread.php?t=88472
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.
Evan Trimboli
Ext User
Tried a... Same result.
Of course you are. Look at the markup before and after you call boxWrap().
Evan Trimboli
Ext User
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.
Code:
<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>
Code:
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"
}]
})
});
});
Evan Trimboli
Ext User
[CLOSED][3.1] tabpanel.el.boxWrap() loses containment when inside a border layout
Reply With Quote
