Results 1 to 7 of 7

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

    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
      0  

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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  3. #3
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
      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
    18,608
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  5. #5
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
      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
    18,608
    Vote Rating
    874
      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
    Twitter - @evantrimboli

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

    Default

    Awesome, thank you!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •