1. #21
    Ext User
    Join Date
    Aug 2007
    Posts
    99
    Vote Rating
    0
    bcamp1973 is on a distinguished road

      0  

    Default


    I'm having some trouble with the plugin. the first panel always loads collapsed. It also doesn't seem to tie into the state manager? More here...

    http://extjs.com/forum/showthread.ph...992#post114992

  2. #22
    Ext User
    Join Date
    Jan 2008
    Posts
    12
    Vote Rating
    0
    thommy is on a distinguished road

      0  

    Default ColFitLayout (based on the implementation of RowFitLayout)

    ColFitLayout (based on the implementation of RowFitLayout)


    It doesn't render perfect as a part of a border layout (with collapsable neighbors), but the result is convenient.

    It supports the minWidth property of panels in connection with the split adapter.

    Code:
    Ext.namespace('Ext.ux.layout'); 
     
    /** 
     * @class Ext.ux.layout.ColFitLayout 
     * @extends Ext.layout.ColumnLayout 
     * <p>Layout that distributes widths of elements so they take 100% of the 
     * container width.</p> 
     * <p>Width of the child element can be given in pixels (as an integer) or 
     * in percent. All elements with absolute width (i.e. in pixels) always will 
     * have the given width. All "free" space (that is not filled with elements 
     * with 'absolute' width) will be distributed among other elements in 
     * proportion of their width percentage. Elements without 'width' in the 
     * config will take equal portions of the "unallocated" width.</p> 
     * <p>Supports panel hiding, removal/addition. The adapter is provided 
     * to use with Ext.SplitBar: <b>Ext.ux.layout.ColFitLayout.SplitAdapter</b>.</p> 
     * <p>Example usage:</p> 
     * <pre><code> 
     var vp = new Ext.Viewport({ 
       layout: 'col-fit', 
       items: [ 
         { xtype: 'panel', width: 100, title: 'Width in pixels', split: true, html: 'panel width = 100px' }, 
         { xtype: 'panel', width: "50%", title: '1/2',  split: true, html: 'Will take half of remaining width' }, 
         { xtype: 'panel', title: 'No width 1', html: 'Panel without given width', id: '' }, 
         { xtype: 'panel', title: 'No width 2', html: 'Another panel' } 
       ] 
     }); 
     * </code></pre> 
     */ 
     
    Ext.ux.layout.ColFitLayout = Ext.extend(Ext.layout.ColumnLayout, {
    	// private
    	monitorResize: true,
    
    	// private	
    	adapters: [], // access to split adapters for recalculate the size limits
    	splitWidth: 3,
    	rendered: false,
    
    	// private
    	renderItem: function(c, position, target) {
    		Ext.ux.layout.ColFitLayout.superclass.renderItem.apply(this, arguments);
    		this.checkRelWidth(c);
    	},
    
    	checkRelWidth: function(c) {
    		// store some layout-specific calculations
    		if (!c.colFit) {
    			// map columnWidth to width given in percent
    			if (c.columnWidth) {
    				c.width = Math.round(c.columnWidth*100) + '%';
    			}
    			c.colFit = {
    				hasAbsWidth: false, // whether the component has absolute width (in pixels)
    				relWidth: 0, // relative width, in pixels (if applicable)
    				calcRelWidth: 0, // calculated relative width (used when element is resized)
    				calcAbsWidth: 0, // calculated absolute width
    				width: c.width, // save width config
    				minWidth: c.minWidth ? c.minWidth : 10
    			};
    		}
    		// process width config option
    		if (c.width) {
    			var width = c.colFit.width || c.width;
    			// store relative (given in percent) width
    			if (typeof width == "string" && width.indexOf("%")) {
    				c.colFit.relWidth = parseInt(width);
    			}
    			else { // set absolute width
    				c.setWidth(c.width);
    				c.colFit.hasAbsWidth = !Boolean(c.split);
    			}
    		}
    		c.isResizable = c.isResizable || Boolean(c.split) || !c.colFit.hasAbsWidth;
    	},
    
    	// private
    	onLayout: function(ct, target) {
    
    		Ext.ux.layout.ColFitLayout.superclass.onLayout.call(this, ct, target);
    
    		if (!ct.items || !ct.items.length) {
    			return;
    		}
    
    		// first loop: determine how many elements with relative width are there,
    		// sums of absolute and relative heights etc.
    		var absWidthSum = 0, // sum of elements' absolute heights
    			relWidthSum = 0, // sum of all percent heights given in children configs
    			relWidthRatio = 1, // "scale" ratio used in case sum <> 100%
    			noWidthCount = 0, // number of elements with no width given
    			relWidthElements = []; // array of elements with 'relative' width for the second loop
    
    		for (var i=0, n = ct.items.length; i < n; i++) {
    			var c = ct.items.itemAt(i);
    
    			if (!c.isVisible()) { continue; }
    
    			if (c.colFit.hasAbsWidth) { // element that has an absolute width
    				absWidthSum += c.width;
    			}
    			else { // 'relative-widthed'
    				if (!c.colFit.relWidth) { // element with no width given
    					noWidthCount++;
    				}
    				else {
    					relWidthSum += c.colFit.relWidth;
    				}
    				relWidthElements.push(c);
    			}
    		}
    
    		// if sum of relative widths <> 100% (e.g. error in config or consequence
    		// of removing panels), scale 'em so it becomes 100%
    		if (noWidthCount == 0 && relWidthSum != 100) {
    			relWidthRatio = 100 / relWidthSum;
    		}
    
    		var viewSize = target.getViewSize();
    		
    		var outerWidth = viewSize.width;
    		var innerDiv = Ext.get(target.dom.firstChild.id);
    		var innerWidth = innerDiv ? innerDiv.getViewSize().width : outerWidth;
    		var height = viewSize.height;
    	
    		// outerWidth != innerWidth if a scrollbar is showing	
    		
    		var doScndCalc = this.setItemsWidth(relWidthElements, outerWidth - absWidthSum, relWidthSum, noWidthCount, relWidthRatio, height);
    		if (doScndCalc && outerWidth != innerWidth) {
    			// to suppress horizontal scrollbars recalculate the widths
    			this.setItemsWidth(relWidthElements, innerWidth - absWidthSum, relWidthSum, noWidthCount, relWidthRatio, height);
    		}
    		else {
    			// suppress the vertical scrollbar
    			if (outerWidth != target.getViewSize().width) {
    				var e = Ext.get(target.dom.firstChild.id);
    				e.setWidth(outerWidth);
    			}
    		}
    
    		var sliderHeight = 0;
    	
    		for (var i=0, n = ct.items.length; i < n; i++) {
    			var c = ct.items.itemAt(i);
    			// sliders height is set to the heightest resizable element 
    			if (!c.isSlider) {
    				sliderHeight = Math.max(sliderHeight, c.getSize().height);
    			}
    			if (c.isSlider && c.el2resize) {
    				var split = new Ext.SplitBar(c.el, c.el2resize.el, Ext.SplitBar.HORIZONTAL, Ext.SplitBar.RIGTH);
    				split.setAdapter(new Ext.ux.layout.ColFitLayout.SplitAdapter(split));
    				c.el2resize.sliderId = c.getId();
    				c.el2resize = false;
    				c.el.adapters = this.adapters;
    				this.adapters.push(split);
    			}
    		}
    
    		sliderHeight = Math.max(sliderHeight, target.getViewSize().height);
    	
    		// set the sliders height
    		for (var i = 0, n = ct.items.length; i < n; i++) {
    			var c = ct.items.itemAt(i);
    			if(c.isSlider) {
    				c.setHeight(sliderHeight);
    			}
    		}
    	
    		if(!this.rendered) { // keep watching for changes of items
    			ct.on('add', this.ctAddItem, this);
    			ct.on('remove', this.ctDelItem, this);
    			this.rendered = true;
    		}
    	},
    	
    	setItemsWidth: function(items, freeWidth, relWidthSum, noWidthCount, relWidthRatio, parentHeight) {
    		var absWidthLeft = freeWidth;
    		var isHigher = false;
    		
    		for (var i = 0, n = items.length; i < n; i++) {
    			var c = items[i], // element we're working with
    				relW = c.colFit.relWidth * relWidthRatio, // width of this element in percent
    				absW = 0; // width in pixels
    			// no width in config
    			if (!relW) {
    				relW = (100 - relWidthSum) / noWidthCount;
    			}
    			// last element takes all remaining space
    			absW = i == n - 1? absWidthLeft: Math.round(freeWidth * relW / 100);
    			
    			// anyway, width can't be negative
    			absW = Math.max(0, absW);
    			
    			c.colFit.calcAbsWidth = absW;
    			c.colFit.calcRelWidth = relW;
    			c.setWidth(absW);
    			isHigher == isHigher || (c.getSize().height > parentHeight);
    			absWidthLeft -= absW;
    		}
    		return isHigher;		
    	},
    
    	// private - called from Ext.Container
    	setContainer : function(ct){
    		Ext.ux.layout.ColFitLayout.superclass.setContainer.call(this, ct);
    		this._addSliders(ct);
    	},
    
    	// private
    	_addSliders: function(ct) {
    		var sw = ct.splitWidth || this.splitWidth;
    		var skip1 = true;
        
    		for (var i = ct.items.length-1; i >= 0; i--) {
    			var c = ct.items.itemAt(i);
    
    			this.checkRelWidth(c);
    			if (c.isResizable) { 
    				if (skip1) {
    					skip1 = false;
    					continue;
    				}
    
    				if (c.split) {
    					var slider = new Ext.Panel({width: sw, isSlider: true});
    					slider.el2resize = c;
    					slider.addClass('y-splitbar-x');
    					ct.insert(i+1, slider);
    				}
    			}
    		}
    	},
    
    	/**
    	* Event listener for the container (on add, remove)
    	* 
    	* @private
    	*/
    	ctAddItem: function(ct, comp, idx) {
                    // todo
    		ct.doLayout();
    	},
    	ctDelItem: function(ct, comp) {
                    // todo
    		ct.doLayout();
    	}
    });
    
    
    // Split adapter
    if (Ext.SplitBar.BasicLayoutAdapter) {
    
    	/**
    	 * @param {Ext.SplitBar} splitbar to which adapter is applied.
    	 *   If supplied, will set correct minSize and maxSize.
    	 */
    	Ext.ux.layout.ColFitLayout.SplitAdapter = function(splitbar){
    		this.setLimits(splitbar);
    	}
    	
    	Ext.extend(Ext.ux.layout.ColFitLayout.SplitAdapter, Ext.SplitBar.BasicLayoutAdapter, {
    	
    		setLimits: function(splitbar) {
    			if (splitbar && splitbar.el.dom.nextSibling) {
    				var next = Ext.getCmp(splitbar.el.dom.nextSibling.id), resized = Ext.getCmp(splitbar.resizingEl.id);
    				
    				// skip abs-width non-resizable components
    				while (next && (!next.isVisible() || !next.isResizable)) {
    					next = Ext.getCmp(next.el.dom.nextSibling.id);
    				}
    				
    				if (next) {
    					splitbar.maxSize = (resized.colFit.hasAbsWidth ? 
    							resized.colFit.calcAbsWidth : resized.getSize().width) 
    							+ next.getInnerWidth() - 1 // seems can't set width=0 in IE, "1" works fine
    							- next.colFit.minWidth; 
    				}
    				splitbar.minSize = resized.getFrameWidth() + 1 + resized.colFit.minWidth;
    			}
    		},
    	
    		setElementSize: function(splitbar, newSize, onComplete){
    			var resized = Ext.getCmp(splitbar.resizingEl.id);
    			
    			// can't resize absent or hidden panel
    			if (!resized || !resized.isVisible()) 
    				return;
    			
    			// resizingEl has absolute width: just change it
    			var oldWidth = resized.getSize().width;
    			
    			if (resized.colFit.hasAbsWidth) {
    				resized.setWidth(newSize);
    			}
    			// resizingEl has relative width: affects next sibling
    			else {
    				if (splitbar.el.dom.nextSibling) {
    					var nextSibling = Ext.getCmp(splitbar.el.dom.nextSibling.id);
    					// skip abs-width non-resizable components
    					while (nextSibling && (!nextSibling.isVisible() || !nextSibling.isResizable)) {
    						nextSibling = Ext.getCmp(nextSibling.el.dom.nextSibling.id);
    					}
    					
    					var deltaAbsWidth = newSize - resized.colFit.calcAbsWidth, // pixels
    						nsRf = nextSibling.colFit, // shortcut
    						rzRf = resized.colFit,     // pixels in a percent
    						pctPxRatio = rzRf.calcRelWidth / rzRf.calcAbsWidth, deltaRelWidth = pctPxRatio * deltaAbsWidth; // change in width in percent
    						rzRf.relWidth = rzRf.calcRelWidth + deltaRelWidth;
    					
    					if (nsRf.hasAbsWidth) {
    						var newWidth = nextSibling.width - deltaAbsWidth;
    						nextSibling.width = newWidth;
    						nextSibling.setWidth(newWidth);
    					}
    					else {
    						nsRf.relWidth = nsRf.calcRelWidth - deltaRelWidth;
    					}
    				}
    			}
    			// recalculate widths
    			resized.ownerCt.doLayout();
    			
    			// recalculate limits
    			for (var i = 0, n = splitbar.el.adapters.length; i < n; i++) {
    				this.setLimits(splitbar.el.adapters[i]);
    			}
    		} // of setElementSize
    	}); // of SplitAdapter
    }
    
    Ext.Container.LAYOUTS['col-fit'] = Ext.ux.layout.ColFitLayout;

  3. #23
    Ext User benjamin.arroyo's Avatar
    Join Date
    Nov 2007
    Posts
    2
    Vote Rating
    0
    benjamin.arroyo is on a distinguished road

      0  

    Thumbs up


    Mgeri, thanks for your modification.
    It works fine but you have to correct a small bug: "heigh" should be "height"

    Here is your onLayout function corrected:
    Code:
    onLayout : function(ct, target) {
    
    	Ext.ux.layout.RowFitLayout.superclass.onLayout.call(this,
    			ct, target);
    
    	if (this.container.collapsed || !ct.items
    			|| !ct.items.length) {
    		return;
    	}
    
    	// first loop: determine how many elements with relative
    	// height are there,
    	// sums of absolute and relative heights etc.
    	var absHeightSum = 0, // sum of elements' absolute heights
    	relHeightSum = 0, // sum of all percent heights given in
    						// children configs
    	relHeightRatio = 1, // "scale" ratio used in case sum <>
    						// 100%
    	noHeightCount = 0, // number of elements with no height
    						// given
    	relHeightElements = []; // array of elements with 'relative'
    							// height for the second loop
    
    	var targetSize = target.getStyleSize();
    	
    	for (var i = 0, n = ct.items.length;i < n; i++) {
    		var c = ct.items.itemAt(i);
    
    		if (!c.isVisible()) {
    			continue;
    		}
    
    		// collapsed panel is treated as an element with
    		// absolute height
    		if (c.collapsed) {
    			var h = c.getFrameHeight();
    			absHeightSum += h;
    			c.setSize({width:targetSize.width, height: h});
    			
    		} else if (c.rowFit.hasAbsHeight) { // element that has
    											// an absolute
    											// height
    			absHeightSum += c.height;
    			c.setSize({width:targetSize.width, height: c.height});
    
    		} else { // 'relative-heighted'
    			if (!c.rowFit.relHeight) { // element with no
    										// height given
    				//noHeightCount++;
    				absHeightSum += c.getFrameHeight();
    				c.setSize({width:targetSize.width, height: c.height});
    			} else {
    				relHeightSum += c.rowFit.relHeight;
    				relHeightElements.push(c);
    			}
    			
    		}
    	}
    
    	// if sum of relative heights <> 100% (e.g. error in config
    	// or consequence
    	// of collapsing/removing panels), scale 'em so it becomes
    	// 100%
    	if (noHeightCount == 0 && relHeightSum != 100) {
    		relHeightRatio = 100 / relHeightSum;
    	}
    	
    	var freeHeight = target.getStyleSize().height
    			- absHeightSum, // "unallocated" height we have
    	absHeightLeft = freeHeight; // track how much free space we
    								// have
    
    	while (relHeightElements.length) {
    		var c = relHeightElements.shift(), // element we're
    											// working with
    		relH = c.rowFit.relHeight * relHeightRatio, // height of
    													// this
    													// element
    													// in
    													// percent
    		absH = 0; // height in pixels
    
    		// no height in config
    		if (!relH) {
    			relH = (100 - relHeightSum) / noHeightCount;
    		}
    
    		// last element takes all remaining space
    		if (!relHeightElements.length) {
    			absH = absHeightLeft;
    		} else {
    			absH = Math.round(freeHeight * relH / 100);
    		}
    
    		// anyway, height can't be negative
    		if (absH < 0) {
    			absH = 0;
    		}
    
    		c.rowFit.calcAbsHeight = absH;
    		c.rowFit.calcRelHeight = relH;
    		c.setSize({width:targetSize.width, height: absH});
    		
    		absHeightLeft -= absH;
    	}
    
    	for (var i = 0, n = ct.items.length;i < n; i++) {
    		var c = ct.items.itemAt(i);
    		if (c.isSlider && c.el2resize) {
    			// this.checkRelHeight(c);
    			var split = new Ext.SplitBar(c.el, c.el2resize.el,
    					Ext.SplitBar.VERTICAL, Ext.SplitBar.TOP);
    			split
    					.setAdapter(new Ext.ux.layout.RowFitLayout.SplitAdapter(split));
    			c.el2resize.sliderId = c.getId();
    			c.el2resize = false;
    		}
    	}
    
    	if (!this.rendered) { // keep watching for changes of
    							// items
    		ct.on('add', this.ctAddItem, this);
    		ct.on('remove', this.ctDelItem, this);
    		this.rendered = true;
    	}
    }
    Quote Originally Posted by mgeri View Post
    Thanks for your work. Using GridPanel as items I could't get the horizontal scrollbar to show up. I changed the doLayout method to set also the panel width and now seems to work.

    Code:
    onLayout : function(ct, target) {
    
    	Ext.ux.layout.RowFitLayout.superclass.onLayout.call(this,
    			ct, target);
    
    	if (this.container.collapsed || !ct.items
    			|| !ct.items.length) {
    		return;
    	}
    
    	// first loop: determine how many elements with relative
    	// height are there,
    	// sums of absolute and relative heights etc.
    	var absHeightSum = 0, // sum of elements' absolute heights
    	relHeightSum = 0, // sum of all percent heights given in
    						// children configs
    	relHeightRatio = 1, // "scale" ratio used in case sum <>
    						// 100%
    	noHeightCount = 0, // number of elements with no height
    						// given
    	relHeightElements = []; // array of elements with 'relative'
    							// height for the second loop
    
    	var targetSize = target.getStyleSize();
    	
    	for (var i = 0, n = ct.items.length;i < n; i++) {
    		var c = ct.items.itemAt(i);
    
    		if (!c.isVisible()) {
    			continue;
    		}
    
    		// collapsed panel is treated as an element with
    		// absolute height
    		if (c.collapsed) {
    			var h = c.getFrameHeight();
    			absHeightSum += h;
    			c.setSize({width:targetSize.width, height: h});
    			
    		} else if (c.rowFit.hasAbsHeight) { // element that has
    											// an absolute
    											// height
    			absHeightSum += c.height;
    			c.setSize({width:targetSize.width, height: c.heigh});
    
    		} else { // 'relative-heighted'
    			if (!c.rowFit.relHeight) { // element with no
    										// height given
    				//noHeightCount++;
    				absHeightSum += c.getFrameHeight();
    				c.setSize({width:targetSize.width, height: c.heigh});
    			} else {
    				relHeightSum += c.rowFit.relHeight;
    				relHeightElements.push(c);
    			}
    			
    		}
    	}
    
    	// if sum of relative heights <> 100% (e.g. error in config
    	// or consequence
    	// of collapsing/removing panels), scale 'em so it becomes
    	// 100%
    	if (noHeightCount == 0 && relHeightSum != 100) {
    		relHeightRatio = 100 / relHeightSum;
    	}
    	
    	var freeHeight = target.getStyleSize().height
    			- absHeightSum, // "unallocated" height we have
    	absHeightLeft = freeHeight; // track how much free space we
    								// have
    
    	while (relHeightElements.length) {
    		var c = relHeightElements.shift(), // element we're
    											// working with
    		relH = c.rowFit.relHeight * relHeightRatio, // height of
    													// this
    													// element
    													// in
    													// percent
    		absH = 0; // height in pixels
    
    		// no height in config
    		if (!relH) {
    			relH = (100 - relHeightSum) / noHeightCount;
    		}
    
    		// last element takes all remaining space
    		if (!relHeightElements.length) {
    			absH = absHeightLeft;
    		} else {
    			absH = Math.round(freeHeight * relH / 100);
    		}
    
    		// anyway, height can't be negative
    		if (absH < 0) {
    			absH = 0;
    		}
    
    		c.rowFit.calcAbsHeight = absH;
    		c.rowFit.calcRelHeight = relH;
    		c.setSize({width:targetSize.width, height: absH});
    		
    		absHeightLeft -= absH;
    	}
    
    	for (var i = 0, n = ct.items.length;i < n; i++) {
    		var c = ct.items.itemAt(i);
    		if (c.isSlider && c.el2resize) {
    			// this.checkRelHeight(c);
    			var split = new Ext.SplitBar(c.el, c.el2resize.el,
    					Ext.SplitBar.VERTICAL, Ext.SplitBar.TOP);
    			split
    					.setAdapter(new Ext.ux.layout.RowFitLayout.SplitAdapter(split));
    			c.el2resize.sliderId = c.getId();
    			c.el2resize = false;
    		}
    	}
    
    	if (!this.rendered) { // keep watching for changes of
    							// items
    		ct.on('add', this.ctAddItem, this);
    		ct.on('remove', this.ctDelItem, this);
    		this.rendered = true;
    	}
    }

  4. #24
    Ext User
    Join Date
    Mar 2007
    Location
    Boston
    Posts
    349
    Vote Rating
    0
    sjivan is on a distinguished road

      0  

    Default


    RowFitLayout appears to break with Ext 2.0.2. It appears to be breaking when Ext is calling
    Code:
    setLayout : function(layout){
            if(this.layout && this.layout != layout){
                this.layout.setContainer(null);
            }
            this.initItems();
            this.layout = layout;
     ==>       layout.setContainer(this);
        }
    No such method on the layout.setContainer(this) line.

    Sanjiv
    Last edited by mystix; 2 Mar 2008 at 6:59 PM. Reason: use [code][/code] tags
    GWT-Ext Widget Library
    http://www.gwt-ext.com/

  5. #25
    Ext JS Premium Member mm_202's Avatar
    Join Date
    Dec 2007
    Location
    USA
    Posts
    59
    Vote Rating
    0
    mm_202 is on a distinguished road

      0  

    Question Width in IE broken?

    Width in IE broken?


    Anyone else have a problem with getting the width of the container to play nice when using layout:'row-fit' inside IE?

    Code:
     var memberpanel = new Ext.grid.GridPanel({
    		//title:qn,
    		//id:qid,
    		//seen:true,
    		autoScroll:true,
    		stripeRows:true,
    		//autoWidth:true,
    		autoHeight:true,
    		//closable:true,
    		store: memberds,		
    		columns: [			
    			{header:'AgentID',      width:80,	sortable:true, dataIndex:'code', renderer:drCode},
    			{header:'Agent Name',   sortable:true, dataIndex:'name'},
    			{header:'Priority',     width:100,	sortable:true, dataIndex:'penalty'},
    			{header:'Extension',    width:100,	sortable:true, dataIndex:'ext'},
    			{header:'Elapsed',      width:120,	sortable:true, dataIndex:'statustime', renderer:drDuration},
    			{header:'StatusID',		sortable:true, dataIndex:'statusid', hidden:true},
    			{header:'Status',       sortable:true, dataIndex:'status'},
    			{header:'Calls Taken',  sortable:true, dataIndex:'callstaken'},
    			{header:'Last Call',    sortable:true, dataIndex:'lastcall', align:'right', renderer:drDuration}
    		],
    		view:gvRowColor
        });
        
    	var panel = new Ext.Panel({			
    		title:qn,
    		id:qid,
    		seen:true,
    		layout:'row-fit',
    		//autoWidth:true,
    		//autoHeight:true,
    		width:750,
    		border:false,
    		items:[infopanel,memberpanel],
    		listeners:{
    			show:function(){			
    				...
    				return true;
    			},
    			hide:function(){
    				...
    				return true;
    			}
    		},
    		tbar: new Ext.Toolbar({
    			frame:false, border:false,
    			bodyStyle:'padding:5px 5px 5px 5px',
    			items: [
    				....				
    			]
    		})
    	});
        
        parent.add(panel);
    parent is a TabPanel, and memberpanel works perfect if I just add it directly to parent.

    It has to be something minor (or something that Im doing wrong) because it renders perfectly in FF...

  6. #26
    Sencha User wasp's Avatar
    Join Date
    Nov 2007
    Posts
    29
    Vote Rating
    0
    wasp is on a distinguished road

      0  

    Default


    I'm having weird bug when resize window which have row fit layout somewhere inside ...

    This is my example:


    when i resize horizontally, it does not resize correctly:



    and after this, when I resize vertically it is okay again:




    I tried to find out what the problem is, but could not find anything unusual onLayout gets called in both cases, but different things happen.

    Any ideas ?

  7. #27
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    adrianrosca is on a distinguished road

      0  

    Default Spot on

    Spot on


    This class was the perfect solution to what nearly drove me nuts with the AnchorLayout. Superb!

    But I also had problems with getting the width to work properly. So i added "c.setWidth();" in the bottom of the onLayout method. Worked for me, but it may screw up other cases than mine.

  8. #28
    Ext User
    Join Date
    Dec 2007
    Location
    italy
    Posts
    120
    Vote Rating
    0
    tarini is on a distinguished road

      0  

    Default


    it works very well

    thank u so much

    PS
    can i make a suggestion?? it will be useful adding a SplitBar to resize vertically panels maybe using the split properties of the panel

  9. #29
    Ext User
    Join Date
    Dec 2007
    Location
    italy
    Posts
    120
    Vote Rating
    0
    tarini is on a distinguished road

      0  

    Default


    I found a little bug...

    If I resize a rowFitLayout panel it correctly resize its contained panel
    but it doesn't refresh nested panel...

    In my example-screenshot i have a border layout viewport with two region:
    - west region: a treepanel
    - center region: a rowFitLayout panel contains two tabPanel. The first tabPanel contains a simple Panel and two GridPanel. The second just a simple Panel

    when I collapse westregion of the viewport grids don't resize...
    Attached Images

  10. #30
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    adrianrosca is on a distinguished road

      0  

    Default


    I think it might be settings on your gridpanel that causes that since your bottom tabpanel seems to behave properly. Maybe grid.setWidth() after the collapse?