X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..e9397f91ede62d446aed37d23256e8938fc4c335:/examples/ux/RowLayout.js diff --git a/examples/ux/RowLayout.js b/examples/ux/RowLayout.js index c2bbf44e..8de2e2c3 100644 --- a/examples/ux/RowLayout.js +++ b/examples/ux/RowLayout.js @@ -1,8 +1,8 @@ /*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ // We are adding these custom layouts to a namespace that does not // exist by default in Ext, so we have to add the namespace first: @@ -73,28 +73,62 @@ Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, { // private monitorResize:true, + type: 'row', + + // private + allowContainerRemove: false, + // private isValidParent : function(c, target){ - return c.getEl().dom.parentNode == this.innerCt.dom; + return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom; }, - // private - onLayout : function(ct, target){ - var rs = ct.items.items, len = rs.length, r, i; + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(), ret; + if (target) { + ret = target.getViewSize(); + + // IE in strict mode will return a height of 0 on the 1st pass of getViewSize. + // Use getStyleSize to verify the 0 height, the adjustment pass will then work properly + // with getViewSize + if (Ext.isIE && Ext.isStrict && ret.height == 0){ + ret = target.getStyleSize(); + } + + ret.width -= target.getPadding('lr'); + ret.height -= target.getPadding('tb'); + } + return ret; + }, + renderAll : function(ct, target) { if(!this.innerCt){ - target.addClass('ux-row-layout-ct'); - this.innerCt = target.createChild({cls:'x-row-inner'}); + // the innerCt prevents wrapping and shuffling while + // the container is resizing + this.innerCt = target.createChild({cls:'x-column-inner'}); + this.innerCt.createChild({cls:'x-clear'}); } - this.renderAll(ct, this.innerCt); + Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt); + }, + + // private + onLayout : function(ct, target){ + var rs = ct.items.items, + len = rs.length, + r, + m, + i, + margins = []; - var size = target.getViewSize(); + this.renderAll(ct, target); + + var size = this.getLayoutTargetSize(); if(size.width < 1 && size.height < 1){ // display none? return; } - var h = size.height - target.getPadding('tb'), + var h = size.height, ph = h; this.innerCt.setSize({height:h}); @@ -104,8 +138,10 @@ Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, { for(i = 0; i < len; i++){ r = rs[i]; + m = r.getPositionEl().getMargins('tb'); + margins[i] = m; if(!r.rowHeight){ - ph -= (r.getSize().height + r.getEl().getMargins('tb')); + ph -= (r.getHeight() + m); } } @@ -113,10 +149,24 @@ Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, { for(i = 0; i < len; i++){ r = rs[i]; + m = margins[i]; if(r.rowHeight){ - r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')}); + r.setSize({height: Math.floor(r.rowHeight*ph) - m}); + } + } + + // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar + // spaces were accounted for properly. If not, re-layout. + if (Ext.isIE) { + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } } } + delete this.adjustmentPass; } /**