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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar