1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    30
    Vote Rating
    0
    fafche is on a distinguished road

      0  

    Default Extjs 4.2.1 portal with re-sized columns

    Extjs 4.2.1 portal with re-sized columns


    I am trying to extend the portal example from the Extjs example and have the columns resize.

    I am facing some issues with the solution.

    1) how can I limit the portal column re-size so it will not pass the min column size.


    2) on the window resize I some time see that the second column is droping down some how. (see image below)

    Here is what I have done: (added the fixColumnWidthOnResize method)

    Code:
    * @class Ext.app.PortalPanel* @extends Ext.panel.Panel* A {@link Ext.panel.Panel Panel} class used for providing drag-drop-enabled portal      layouts.*/Ext.define('NG.ux.portal.PortalPanel', {extend: 'Ext.Panel',alias: 'widget.portalpanel',requires: [    'NG.ux.portal.PortalDropZone',    'NG.ux.portal.PortalColumn',    'NG.ux.manager.CardDeck'],id: 'the-center',cls: 'x-portal',bodyCls: 'x-portal-body',defaultType: 'portalcolumn',manageHeight: false,autoScroll: true,widgetSizeState: null,layout: 'column',initComponent: function () {    // Implement a Container beforeLayout call from the layout to this Container    this.callParent();    this.addEvents({        validatedrop: true,        beforedragover: true,        dragover: true,        beforedrop: true,        drop: true    });    this.items.getAt(0).resizable = {        handles: 'e'    }},getColumnResizePrecentage: function (column, index) {    var columnWidth = column.width;    if (columnWidth === undefined) {        return 0;    }    if (columnWidth === column.getWidth()) {        return 0;    }    var by = columnWidth / column.getWidth();    return {        by: by,        index: index,        newColumnWidth: column.columnWidth * by    }},fixColumnWidthOnResize: function () {    var items = this.layout.getLayoutItems(),        len = items.length,        hasResized = false,        i, item, resizeBy;    for (i = 0; i < len; i++) {        item = items[i];        resizeBy = this.getColumnResizePrecentage(item, i);        if (resizeBy != 0) {            hasResized = true;            break;        }    }    if (hasResized) {        Ext.suspendLayouts();        for (i = 0; i < len; i++) {            item = items[i];            if (i === resizeBy.index) {                item.columnWidth = resizeBy.newColumnWidth;            } else {                item.columnWidth = 1 - resizeBy.newColumnWidth;            }        }        Ext.resumeLayouts();    }},// Set columnWidth, and set first and last column classes to allow exact CSS targeting.beforeLayout: function () {    var items = this.layout.getLayoutItems(),        len = items.length,        firstAndLast = ['x-portal-column-first', 'x-portal-column-last'],        i, item, last;    this.fixColumnWidthOnResize();    for (i = 0; i < len; i++) {        item = items[i];        last = (i == len - 1);        if (!i) { // if (first)            if (last) {                item.addCls(firstAndLast);            } else {                item.addCls('x-portal-column-first');                item.removeCls('x-portal-column-last');            }        } else if (last) {            item.addCls('x-portal-column-last');            item.removeCls('x-portal-column-first');        } else {            item.removeCls(firstAndLast);        }    }    return this.callParent(arguments);},// privateinitEvents: function () {    this.callParent();    this.dd = Ext.create('NG.ux.portal.PortalDropZone', this, this.dropConfig);},// privatebeforeDestroy: function () {    if (this.dd) {        this.dd.unreg();    }    this.callParent();},onWidgetMaximize: function (event, toolEl, header, tool) {    this.getCardDeck().maximizeWidget(header.up());},onWidgetMinimize: function (event, toolEl, header, tool) {    this.getCardDeck().minimizeWidget();},getCardDeck: function () {    if (!this.cardDeck) {        this.cardDeck = this.up();    }    return this.cardDeck;}});/*** @class Ext.app.PortalColumn* @extends Ext.container.Container* A layout column class used internally be {@link Ext.app.PortalPanel}.*/Ext.define('NG.ux.portal.PortalColumn', {extend: 'Ext.container.Container',alias: 'widget.portalcolumn',requires: [    'Ext.layout.container.Anchor',    'NG.ux.portal.Portlet'],layout: 'anchor',defaultType: 'portlet',cls: 'x-portal-column',columnWidth:.5,height:'100%',minWidth:450// This is a class so that it could be easily extended// if necessary to provide additional behavior. });


    before re size:

    beforeResize.jpg
    afterre size:
    afterResize.jpg

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,577
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Here is the sample code from @fafche for those in the community looking to pitch in:

    Code:
    Ext.define('NG.ux.portal.PortalPanel', {
        extend: 'Ext.Panel',
        alias: 'widget.portalpanel',
        requires: ['NG.ux.portal.PortalDropZone', 'NG.ux.portal.PortalColumn', 'NG.ux.manager.CardDeck'],
        id: 'the-center',
        cls: 'x-portal',
        bodyCls: 'x-portal-body',
        defaultType: 'portalcolumn',
        manageHeight: false,
        autoScroll: true,
        widgetSizeState: null,
        layout: 'column',
        initComponent: function () {
            // Implement a Container beforeLayout call from the layout to this Container    
            this.callParent();
            this.addEvents({
                validatedrop: true,
                beforedragover: true,
                dragover: true,
                beforedrop: true,
                drop: true
            });
            this.items.getAt(0).resizable = {
                handles: 'e'
            }
        },
        getColumnResizePrecentage: function (column, index) {
            var columnWidth = column.width;
            if (columnWidth === undefined) {
                return 0;
            }
            if (columnWidth === column.getWidth()) {
                return 0;
            }
            var by = columnWidth / column.getWidth();
            return {
                by: by,
                index: index,
                newColumnWidth: column.columnWidth * by
            }
        },
        fixColumnWidthOnResize: function () {
            var items = this.layout.getLayoutItems(),
                len = items.length,
                hasResized = false,
                i, item, resizeBy;
            for (i = 0; i < len; i++) {
                item = items[i];
                resizeBy = this.getColumnResizePrecentage(item, i);
                if (resizeBy != 0) {
                    hasResized = true;
                    break;
                }
            }
            if (hasResized) {
                Ext.suspendLayouts();
                for (i = 0; i < len; i++) {
                    item = items[i];
                    if (i === resizeBy.index) {
                        item.columnWidth = resizeBy.newColumnWidth;
                    } else {
                        item.columnWidth = 1 - resizeBy.newColumnWidth;
                    }
                }
                Ext.resumeLayouts();
            }
        },
        // Set columnWidth, and set first and last column classes to allow exact CSS targeting.
        beforeLayout: function () {
            var items = this.layout.getLayoutItems(),
                len = items.length,
                firstAndLast = ['x-portal-column-first', 'x-portal-column-last'],
                i, item, last;
            this.fixColumnWidthOnResize();
            for (i = 0; i < len; i++) {
                item = items[i];
                last = (i == len - 1);
                if (!i) {
                    // if (first)            
                    if (last) {
                        item.addCls(firstAndLast);
                    } else {
                        item.addCls('x-portal-column-first');
                        item.removeCls('x-portal-column-last');
                    }
                } else if (last) {
                    item.addCls('x-portal-column-last');
                    item.removeCls('x-portal-column-first');
                } else {
                    item.removeCls(firstAndLast);
                }
            }
            return this.callParent(arguments);
        },
        // private
        initEvents: function () {
            this.callParent();
            this.dd = Ext.create('NG.ux.portal.PortalDropZone', this, this.dropConfig);
        },
        // private
        beforeDestroy: function () {
            if (this.dd) {
                this.dd.unreg();
            }
            this.callParent();
        },
        onWidgetMaximize: function (event, toolEl, header, tool) {
            this.getCardDeck().maximizeWidget(header.up());
        },
        onWidgetMinimize: function (event, toolEl, header, tool) {
            this.getCardDeck().minimizeWidget();
        },
        getCardDeck: function () {
            if (!this.cardDeck) {
                this.cardDeck = this.up();
            }
            return this.cardDeck;
        }
    }); /*** @class Ext.app.PortalColumn* @extends Ext.container.Container* A layout column class used internally be {@link Ext.app.PortalPanel}.*/
    Ext.define('NG.ux.portal.PortalColumn', {
        extend: 'Ext.container.Container',
        alias: 'widget.portalcolumn',
        requires: ['Ext.layout.container.Anchor', 'NG.ux.portal.Portlet'],
        layout: 'anchor',
        defaultType: 'portlet',
        cls: 'x-portal-column',
        columnWidth: .5,
        height: '100%',
        minWidth: 450 // This is a class so that it could be easily extended// if necessary to provide additional behavior. 
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1

Tags for this Thread