1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    15
    Vote Rating
    0
    reycri is on a distinguished road

      0  

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

    [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
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    15
    Vote Rating
    0
    reycri is on a distinguished road

      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,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    reycri is on a distinguished road

      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
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      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
    reycri is on a distinguished road

      0  

    Default


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