Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

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

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


    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
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,912
    Vote Rating
    628
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,912
    Vote Rating
    628
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    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>

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,912
    Vote Rating
    628
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Awesome, thank you!

Thread Participants: 1