Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    SimonDeNooij is on a distinguished road

      0  

    Post [CLOSED][2.x/3.x] BorderLayout floating region not resized

    [CLOSED][2.x/3.x] BorderLayout floating region not resized


    Sizing of 'preview' panels (panels that aren't permanently expanded but 'previewed' by clicking in the header area) is not right.

    It can be shown with the complex layout example on your web site:

    Expand West panel (with expand button)
    Collapse West panel
    Collapse South panel
    'Preview' West panel:

    the height of the west panel is not right. It is the height it had before it was collapsed.

    The same bug exists for horizontal border panels (north and south). I don't know the version you are using for your comples layout example but the bug still exists in version 2.1

    Also: it would be nice to have events for previewing like for true expand/collapse

    Keep up the good work,

    Simon
    -->

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Looks like bug. Do you want me to move this thread to Bugs forum?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM

    -->

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    SimonDeNooij is on a distinguished road

      0  

    Default


    Anything to get it solved
    -->

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Moved.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM

    -->

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    SimonDeNooij is on a distinguished road

      0  

    Default Any plans on this one

    Any plans on this one


    Are you planning to solve this bug in the near future? It prevents me from using this otherwise very sex feature
    -->

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    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


    'preview' is called 'floating' in Ext.

    I noticed this a long time ago, but I never made a proper bug report for it.
    -->

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    SimonDeNooij is on a distinguished road

      0  

    Default


    Ok, but the question remains? will it be solved in the near future?
    -->

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    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


    Here is a possible solution:
    Code:
    Ext.override(Ext.layout.BorderLayout.Region, {
    	slideOut : function(){
    		if(this.isSlid || this.el.hasActiveFx()){
    			return;
    		}
    		this.isSlid = true;
    		this.panel.isSlid = true;
    		var ts = this.panel.tools;
    		if(ts && ts.toggle){
    			ts.toggle.hide();
    		}
    		this.el.show();
    		if(this.position == 'east' || this.position == 'west'){
    			this.panel.setSize(undefined, this.collapsedEl.getHeight());
    		}else{
    			this.panel.setSize(this.collapsedEl.getWidth(), undefined);
    		}
    		this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
    		this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
    		this.el.setStyle("z-index", 102);
    		this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
    		if(this.animFloat !== false){
    			this.beforeSlide();
    			this.el.slideIn(this.getSlideAnchor(), {
    				callback: function(){
    					this.afterSlide();
    					this.initAutoHide();
    					Ext.getDoc().on("click", this.slideInIf, this);
    				},
    				scope: this,
    				block: true
    			});
    		}else{
    			this.initAutoHide();
    			 Ext.getDoc().on("click", this.slideInIf, this);
    		}
    	},
    	afterSlideIn : function(){
    		this.clearAutoHide();
    		this.isSlid = false;
    		delete this.panel.isSlid;
    		this.clearMonitor();
    		this.el.setStyle("z-index", "");
    		this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
    		this.el.dom.style.left = this.restoreLT[0];
    		this.el.dom.style.top = this.restoreLT[1];
    		var ts = this.panel.tools;
    		if(ts && ts.toggle){
    			ts.toggle.show();
    		}
    	},
    	slideIn : function(cb){
    		if(!this.isSlid || this.el.hasActiveFx()){
    			Ext.callback(cb);
    			return;
    		}
    		this.isSlid = false;
    		delete this.panel.isSlid;
    		if(this.animFloat !== false){
    			this.beforeSlide();
    			this.el.slideOut(this.getSlideAnchor(), {
    				callback: function(){
    					this.el.hide();
    					this.afterSlide();
    					this.afterSlideIn();
    					Ext.callback(cb);
    				},
    				scope: this,
    				block: true
    			});
    		}else{
    			this.el.hide();
    			this.afterSlideIn();
    		}
    	}
    });
    Ext.override(Ext.Panel, {
    	onResize : function(w, h){
    		if(w !== undefined || h !== undefined){
    			if(!this.collapsed || this.isSlid){
    				if(typeof w == 'number'){
    					this.body.setWidth(
    							this.adjustBodyWidth(w - this.getFrameWidth()));
    				}else if(w == 'auto'){
    					this.body.setWidth(w);
    				}
    				if(typeof h == 'number'){
    					this.body.setHeight(
    							this.adjustBodyHeight(h - this.getFrameHeight()));
    				}else if(h == 'auto'){
    					this.body.setHeight(h);
    				}
    				if(this.disabled && this.el._mask){
    					this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());
    				}
    			}else{
    				this.queuedBodySize = {width: w, height: h};
    				if(!this.queuedExpand && this.allowQueuedExpand !== false){
    					this.queuedExpand = true;
    					this.on('expand', function(){
    						delete this.queuedExpand;
    						this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
    						this.doLayout();
    					}, this, {single:true});
    				}
    			}
    			this.fireEvent('bodyresize', this, w, h);
    		}
    		this.syncShadow();
    	}
    });
    Ext.override(Ext.layout.ContainerLayout, {
    	onResize: function(){
    		if(this.container.collapsed && !this.container.isSlid){
    			return;
    		}
    		var b = this.container.bufferResize;
    		if(b){
    			if(!this.resizeTask){
    				this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
    				this.resizeBuffer = typeof b == 'number' ? b : 100;
    			}
    			this.resizeTask.delay(this.resizeBuffer);
    		}else{
    			this.layout();
    		}
    	}
    });
    Ext.override(Ext.layout.FitLayout, {
    	onLayout : function(ct, target){
    		Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
    		if(!this.container.collapsed || this.container.isSlid){
    			this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
    		}
    	}
    });
    Last edited by Condor; 17 Dec 2008 at 7:54 AM. Reason: Added fixes for ContainerLayout and FitLayout
    -->

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    SimonDeNooij is on a distinguished road

      0  

    Default


    Thanks for sorting it out! I hope this makes it into the next Ext release, I allready changed the design of our app to avoid this problem and am now too time-pressed to incorporate this solution, but the sliding panels will definitely make it into future versions of our app!

    Regards,

    Simon
    -->

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2008
    Location
    Philadelphia, PA
    Posts
    131
    Vote Rating
    0
    mprice is on a distinguished road

      0  

    Default


    Condor, thanks for the update. I applied these overrides to the complex layout example, and now the region itself does indeed resize correctly when "floated" after a browser resize. But the contents of the region to not resize properly. The east region is a fit layout, and the tab panel is added directly to the east region. How would I get the tab panel to resize as well? See screenshot :

    temp.jpg

    Repro steps:
    1. Collapse the east region
    2. Resize the browser to make it bigger
    3. "Float" the east region
    -->