Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: [2.2] IE BorderLayout: Nested west panel width set to 0 inside collapsed south panel

  1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    15
    Vote Rating
    0
      0  

    Default [2.2] IE BorderLayout: Nested west panel width set to 0 inside collapsed south panel

    I did a search but could not find a case exactly like this:

    Code:
    function go()
    {
    	var p = new Ext.Panel({
    			renderTo: "here",
    			width: 700,
    			height: 500,
    			layout: "border",
    			items: [
    					{
    						region: "center",
    						html: "This is the main panel"
    					},
    					{
    						region: "south",
    						layout: "border",
    						region: "south",
    						split: true,
    						collapsible: true,
    						collapseMode: "mini",
    						collapsed: true,
    						height: 234,
    						items: [
    								{
    									region: "west",
    									split: true,
    									hideMode: "offsets",
    									width: 180,
    									html: "this is lower left pane."
    								},
    								{
    									region: "center",
    									html: "this is lower main pane."
    								}
    							]
    					}
    				]
    		});
    }
    Ext.onReady(go);
    When the south panel is expanded (using the mini expander on the split bar), you will see that the nested west panel's width is 0 (instead of 180).

    If you set the collapsed property to false on the south panel. It works as expected.

    I tried the usual workaround of setting hideMode to "offsets" or "visibility" (as mentioned in other threads related to tab panels). But none of the combinations I tried worked.

    Thanks in advance...

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Did you add hideMode:'offsets' to the south panel?

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    15
    Vote Rating
    0
      0  

    Default

    Yes... and I tried it again just to be sure.
    Unfortunately, it didn't solve this problem.
    Thanks, though...

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,608
    Vote Rating
    59
      0  

    Default

    A perfect example of why you should indent with spaces.

    But anyway, pasting this code into the console in one of the example pages:

    Code:
    Ext.getBody().update('');
    var p = new Ext.Panel({
        title: 'Test',
        renderTo: document.body,
        width: 700,
        height: 500,
        layout: "border",
        items: [{
            region: "center",
            html: "This is the main panel"
        }, {
            region: "south",
            layout: "border",
            region: "south",
            split: true,
            collapsible: true,
            collapseMode: "mini",
            collapsed: true,
            height: 234,
            items: [{
                region: "west",
                split: true,
                hideMode: "offsets",
                width: 180,
                html: "this is lower left pane."
            }, {
                region: "center",
                html: "this is lower main pane."
            }]
        }]
    });
    When I expanded that collapsed south produced:



    What is 'here' in you page?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    @Animal: IE6/7 doesn't have a console, so how did you manage to paste your code there?

    @reycri: Yes, hideMode doesn't work here...

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Let's solve this Ext 6/7 collapsed borderlayout sizing problem once and for all:
    Code:
    Ext.override(Ext.layout.BorderLayout.Region, {
    	getSize : function(){
    		return this.isCollapsed ? this.getCollapsedEl().getSize() : 
    			(Ext.isIE ? this.panel.getPositionEl().getStyleSize() : this.panel.getSize());
    	}
    });

  7. #7
    Ext User
    Join Date
    Nov 2008
    Posts
    15
    Vote Rating
    0
      0  

    Default

    @Animal: Sorry for the excessive indents, my editor uses only 4 spaces per tab. 'here' is the id of an empty div element in my sample page. This problem only occurs in IE - I tried IE6 and IE7.

    @Condor: The override you provided didn't work. Immediately after the page renders (while the lower pane is still collapsed), I inspected the lower left pane and its offsetWidth property is 0. It's styles.width is "0px". I used the "IE Developer Toolbar" to inspect this.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    OK, now try this solution:
    Code:
    Ext.override(Ext.Container, {
    	doLayout : function(shallow){
    		if(!this.isVisible() || this.collapsed){
    			this.deferLayout = this.deferLayout || !shallow;
    			return;
    		}
    		if(this.rendered && this.layout){
    			this.layout.layout();
    		}
    		if(shallow !== false && this.items){
    			var cs = this.items.items;
    			for(var i = 0, len = cs.length; i < len; i++) {
    				var c  = cs[i];
    				if(c.doLayout){
    					c.doLayout();
    				}
    			}
    		}
    	},
    	onShow : function(){
    		Ext.Container.superclass.onShow.apply(this, arguments);
    		if(c.deferLayout !== undefined){
    			var deep = this.deferLayout;
    			delete this.deferLayout;
    			c.doLayout(!deep);
    		}
    	}
    });
    Ext.override(Ext.Panel, {
    	afterExpand : function(){
    		this.collapsed = false;
    		this.afterEffect();
    		if(c.deferLayout !== undefined){
    			var deep = this.deferLayout;
    			delete this.deferLayout;
    			c.doLayout(!deep);
    		}
    		this.fireEvent('expand', this);
    	}
    });

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    Quote Originally Posted by reycri View Post
    ... excessive indents, my editor uses only 4 spaces per tab.
    Have your IDE convert tabs to spaces, or use another tool like:
    http://jsbeautifier.org/

  10. #10
    Ext User
    Join Date
    Nov 2008
    Posts
    15
    Vote Rating
    0
      0  

    Default

    Thanks, Condor, that worked perfectly.
    So this fix is obviously not in v2.2.1...
    Will this fix be in v3.x?

Page 1 of 2 12 LastLast

Posting Permissions

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