1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    28
    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,115
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread