1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    18
    Vote Rating
    0
    mangrar is on a distinguished road

      0  

    Question Ext.ux.RowLayout

    Ext.ux.RowLayout


    Read this thread before continue.

    Suppose that you want to do the same that the portal example but disposing panels in rows instead of columns. So a panel can vary in width. In Ext, does not exist a RowLayout class. I'm doing a project that I need the same as portal example but disposing panels in rows. So I thought, why not create a RowLayout?? I've never created an Ext extension, so, if somebody can help me a little, it will be gratefull.

    This is the extension I've developed:

    Code:
    /*
    // All rows are percentages -- they must add up to 1
    
    var p = new Ext.Panel({
    
        title: 'Row Layout - Percentage Only',
    
        xtype:'rowlayout',
    
        items: [{
    
            title: 'Column 1',
    
            rowHeight: .25 
    
        },{
    
            title: 'Column 2',
    
            rowHeight: .6
    
        },{
    
            title: 'Column 3',
    
            rowHeight: .15
    
        }]
    
    });
    
    */
    Ext.ux.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
    
        // private
    
        monitorResize:true,
    
        // private
    
        extraCls: 'x-column',
    
    
    
        scrollOffset : 0,
    
    
    
        // private
    
        isValidParent : function(c, target){
    
            return c.getEl().dom.parentNode == this.innerCt.dom;
    
        },
    
    
    
        // private
    
        onLayout : function(ct, target){
    
            var cs = ct.items.items, len = cs.length, c, i;
    
    
    
            if(!this.innerCt){
    
                target.addClass('x-column-layout-ct');
    
    
    
                // the innerCt prevents wrapping and shuffling while
    
                // the container is resizing
    
                this.innerCt = target.createChild({cls:'x-column-inner'});
    
    
    
                this.renderAll(ct, this.innerCt);
    
    
    
                this.innerCt.createChild({cls:'x-clear'});
    
    
    
            }
    
    
    
            var size = target.getViewSize();
    
    
    
            if(size.width < 1 && size.height < 1){ // display none?
    
                return;
    
            }
    
    
    
            var w = size.width - target.getPadding('lr') - this.scrollOffset,
    
                h = size.height - target.getPadding('tb'),
    
                ph = h;
    
    
    
            this.innerCt.setheight(h);
    
            
    
            // some rows can be percentages while others are fixed
    
            // so we need to make 2 passes
    
    
    
            for(i = 0; i < len; i++){
    
                c = cs[i];
    
                if(!c.rowHeight){
    
                    ph -= (c.getSize().height + c.getEl().getMargins('tb'));
    
                }
    
            }
    
    
    
            ph = ph < 0 ? 0 : ph;
    
    
    
            for(i = 0; i < len; i++){
    
                c = cs[i];
    
                if(c.rowHeight){
    
                    c.setSize(Math.floor(c.rowHeight*pw) - c.getEl().getMargins('tb'));
    
                }
    
            }
    
        }
    
        
    
        /**
    
         * @property activeItem
    
         * @hide
    
         */
    
    });
    
    Ext.reg('rowlayout', Ext.ux.RowLayout);
    In the portal example, the PortalColumn class would be renamed to PortalRow:

    Code:
    Ext.ux.PortalRow = Ext.extend(Ext.Container, {
    
        layout: 'anchor',
    
        autoEl: 'div',
    
        defaultType: 'portlet',
    
        cls:'x-portal-column'
    
    });
    
    Ext.reg('portalrow', Ext.ux.PortalRow);
    I haven't tested this classes because I'm at job, but if someone wants to help me, I think this new layout is interesting. This evening I will test it.

  2. #2

  3. #3
    Sencha User svdb's Avatar
    Join Date
    Jan 2008
    Posts
    68
    Vote Rating
    2
    svdb is on a distinguished road

      0  

    Default


    Hi mangrar,
    I hope you're still subscribed to this thread. Have you got any update to this component? I'm trying to solve the same problem. The RowFitLayout is just a single column which fits 100% in width and height. Not what we're looking for.
    Thanks,
    svdb

Thread Participants: 2

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