view release on metacpan or  search on metacpan

share/docs/source/ColumnLayout.html  view on Meta::CPAN

 * <pre><code>
// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: 'Column Layout - Percentage Only',
    layout:'column',
    items: [{
        title: 'Column 1',
        columnWidth: .25
    },{
        title: 'Column 2',
        columnWidth: .6
    },{
        title: 'Column 3',
        columnWidth: .15
    }]
});

// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
    title: 'Column Layout - Mixed',
    layout:'column',
    items: [{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: .8
    },{
        title: 'Column 3',
        columnWidth: .2
    }]
});
</code></pre>
 */
Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
<span id='Ext-layout-ColumnLayout-property-monitorResize'>    // private
</span>    monitorResize:true,

<span id='Ext-layout-ColumnLayout-property-type'>    type: 'column',
</span>
<span id='Ext-layout-ColumnLayout-cfg-extraCls'>    extraCls: 'x-column',
</span>
<span id='Ext-layout-ColumnLayout-property-scrollOffset'>    scrollOffset : 0,
</span>
<span id='Ext-layout-ColumnLayout-property-targetCls'>    // private
</span>
    targetCls: 'x-column-layout-ct',

<span id='Ext-layout-ColumnLayout-method-isValidParent'>    isValidParent : function(c, target){
</span>        return this.innerCt &amp;&amp; c.getPositionEl().dom.parentNode == this.innerCt.dom;
    },

<span id='Ext-layout-ColumnLayout-method-getLayoutTargetSize'>    getLayoutTargetSize : function() {
</span>        var target = this.container.getLayoutTarget(), ret;
        if (target) {
            ret = target.getViewSize();

            // IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
            // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
            // with getViewSize
            if (Ext.isIE9m &amp;&amp; Ext.isStrict &amp;&amp; ret.width == 0){
                ret =  target.getStyleSize();
            }

            ret.width -= target.getPadding('lr');
            ret.height -= target.getPadding('tb');
        }
        return ret;
    },

<span id='Ext-layout-ColumnLayout-method-renderAll'>    renderAll : function(ct, target) {
</span>        if(!this.innerCt){
            // 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'});
        }
        Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
    },

<span id='Ext-layout-ColumnLayout-method-onLayout'>    // private
</span>    onLayout : function(ct, target){
        var cs = ct.items.items,
            len = cs.length,
            c,
            i,
            m,
            margins = [];

        this.renderAll(ct, target);

        var size = this.getLayoutTargetSize();

        if (Ext.isIE9m &amp;&amp; (size.width &lt; 1 &amp;&amp; size.height &lt; 1)) { // display none?
            return;
        }

        var w = size.width - this.scrollOffset,
            h = size.height,
            pw = w;

        this.innerCt.setWidth(w);

        // some columns can be percentages while others are fixed
        // so we need to make 2 passes

        for(i = 0; i &lt; len; i++){
            c = cs[i];
            m = c.getPositionEl().getMargins('lr');
            margins[i] = m;
            if(!c.columnWidth){
                pw -= (c.getWidth() + m);
            }
        }

        pw = pw &lt; 0 ? 0 : pw;

        for(i = 0; i &lt; len; i++){
            c = cs[i];