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

Thread: [FIXED-101][3.x/2.x] Panel collapses bwrap with display:none

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default [FIXED-101][3.x/2.x] Panel collapses bwrap with display:none

    This bug has been reported several times before, but nobody made a proper bugreport for it:

    Ext.Panel.collapse() collapses the collapseEl element (bwrap) with display:none.
    This can cause several problems in components (combobox zero listwidth, border layout region zero height/width etc.).

    This problem also affects panels in an accordion layout, because it also uses collapse() to only show the panel header of collapsed items.

    IMHO Ext.Panel should use the current hideMode to hide the collapseEl.

    Example:
    Code:
    new Ext.Viewport({
    	layout: 'accordion',
    	layoutConfig: {
    		animate: true
    	},
    	items: [{
    		title: 'Panel 1'
    	},{
    		title: 'Panel 2',
    		layout: 'form',
    		hideMode: 'offsets', // <- not used by collapse()
    		items: {
    			fieldLabel: 'Combobox',
    			xtype: 'combo',
    			store: ['A', 'B', 'C'],
    			triggerAction: 'all',
    			editable: false
    		}
    	}]
    });
    (notice the wrong combobox listwidth on the second panel)

    Unfortunately the actual fix would require a rather big rewrite, so I'll only provide a workaround:
    Code:
    Ext.override(Ext.Panel, {
    	onCollapse : function(doAnim, animArg){
    		this[this.collapseEl].setVisibilityMode(Ext.Element.VISIBILITY);
    		if(doAnim){
    			this[this.collapseEl].slideOut(this.slideAnchor,
    					Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this),
    						this.collapseDefaults));
    		}else{
    			this[this.collapseEl].hide();
    			this.afterCollapse();
    		}
    	},
    	afterCollapse : function(){
    		this[this.collapseEl].applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
    		this.collapsed = true;
    		this.el.addClass(this.collapsedCls);
    		this.afterEffect();
    		this.fireEvent('collapse', this);
    	},
    	onExpand : function(doAnim, animArg){
    		this[this.collapseEl].applyStyles({position: '', top: '', left: ''});
    		if(doAnim){
    			this[this.collapseEl].slideIn(this.slideAnchor,
    				Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
    					this.expandDefaults));
    		}else{
    			this[this.collapseEl].show();
    			this.afterExpand();
    		}
    	}
    });
    Ext.override(Ext.layout.Accordion, {
    	setItemSize : function(item, size){
    		if(this.fill && item){
    			var items = this.container.items.items;
    			var hh = 0;
    			for(var i = 0, len = items.length; i < len; i++){
    				var p = items[i];
    				if(p != item){
    					hh += (p.getSize().height - (p.collapsed ? 0 : p.bwrap.getHeight()));
    				}
    			}
    			size.height -= hh;
    			item.setSize(size);
    		}
    	}
    });
    Last edited by Condor; 1 May 2009 at 3:05 AM. Reason: aboslute -> absolute

  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    i was wondering why the workaround wasn't working.

    there's a small typo in the afterCollapse override:
    Code:
    	afterCollapse : function(){
    		this[this.collapseEl].applyStyles({position: 'aboslute', top: '-10000px', left: '-10000px'});
    		this.collapsed = true;
    		this.el.addClass(this.collapsedCls);
    		this.afterEffect();
    		this.fireEvent('collapse', this);
    	},
    that should be absolute.
    Last edited by mystix; 4 Jan 2009 at 7:26 PM. Reason: override's working fine... found a small typo though

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    6
    Vote Rating
    0
      0  

    Default

    I've found the case where fieldset doesn't get expanded once it's collapsed:

    Code:
    var panelContent = new Ext.Panel({
        ...
        items: new Ext.form.FieldSet({
            border: false,
            labelAlign: 'top',
            labelWidth: 100,
            style: 'padding:10px;',
            items: [
                ....
                {
                    xtype: 'checkbox',
                    hideLabel: true,        
                    anchor: '100%',
                    inputValue: 1,
                    checked: false,
                    listeners: {
                        check: function(checkBox, checked) {
                            var fckFieldset = Ext.getCmp('buggyFieldset');
                            if (checked && ('function' == typeof(fckFieldset.collapse))) {
                                fckFieldset.collapse();                            
                            } else if ('function' == typeof(fckFieldset.expand)) {                            
                                fckFieldset.expand();                            
                            }
                        }
                    }
                }
                ,new Ext.form.FieldSet({        
                    id: 'buggyFieldset'
                    style: 'padding:0px; margin:0px',
                    layoutConfig: {
                        labelSeparator: ''
                    },
                    collapsible: true,
                    collapsed: true,
                    autoHeight: true,
                    border: false,
                    items: new Ext.ux.form.FckEditor({
                        ....
                    })
                }),
                new Ext.ux.form.FckEditor({
                    ....
                })
            ]
        }),
        ...
    });
    and this is what fixed this:

    Code:
        onExpand : function(doAnim, animArg){
             //this[this.collapseEl].applyStyles({position: '', top: '', left: ''});
            if(doAnim){
                this[this.collapseEl].slideIn(this.slideAnchor,
                        Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
                            this.expandDefaults));
            }else{
                this[this.collapseEl].show();
                this.afterExpand();
            }
        },
        afterExpand : function() {
            this[this.collapseEl].applyStyles({position: '', top: '', left: ''});
            this.collapsed = false;
            this.afterEffect();
            this.fireEvent('expand', this);
        }
    Ext.ux.form.FckEditor is my own ExtJs wrapper class for FCK Editor (extended textarea).

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default

    Doesn't that kill the slideIn animation effect?

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    108
    Vote Rating
    0
      0  

    Default

    +1 for fixing this issue...I just ran into it today.

    I ended up solving the issue by not using collapsed: true in the initial config, but rather collapsing the panel after rendering, without animating. It seems to happen fast enough to cause no screen flicker. This is in a window with a form that has 6 collapsible fieldsets.
    --Chad Eberle
    Web Application Architect
    Pierce County Software Development
    Pierce County, Washington

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default

    I don't think this will be solved in the Ext 2.x branch.

    However, it was fixed in Ext 3.0 (by deffering layout until the panel is expanded).
    Unfortunately animation still uses display:none as Animal pointed out.

  7. #7
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    [ moved to 3.x Bugs from 2.x Bugs ]
    with reference to the following thread:
    http://extjs.com/forum/showthread.php?t=76784

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,891
    Vote Rating
    89
      0  

    Default

    It's not fixed in that the slideOut effect still uses display: none

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default

    You should not consider my patch as the final solution. The problem needs to be handled much deeper down (IMHO animation effects should have the choice of using display, visibility or offsets).

  10. #10
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Germany
    Posts
    538
    Vote Rating
    2
      0  

    Default

    Quote Originally Posted by Condor View Post
    However, it was fixed in Ext 3.0 (by deffering layout until the panel is expanded).
    Haven't tried in Ext 3.0 yet, but I don't believe deferring layout fixes all implications. It only helps getting the layout right on initial rendering of a panel. But think of things like updating the value of a progress bar that resides in a collapsed container. Its bar element will be sized relative to its main el size, which is zero because the container panel el has "display: none".

    Condor's workaround helps here, but using "hideMode" settings for collapsing is the solid way to go.

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
  •