[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:

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:

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.

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>

**evant** · 24 Dec 2009, 4:53 PM

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"
            }]
        })
    });
});

**zhegwood** · 28 Dec 2009, 8:20 AM

Awesome, thank you!

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

Thread Tools

Search Thread

Display

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

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News