1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    11
    Vote Rating
    1
    CSV is on a distinguished road

      0  

    Default Panel with height AND flex?

    Panel with height AND flex?


    TLDR: How to have a panel with flex, but allow a height to be set so it expands to fill view

    Trying to create a template panel that holds two panels and a resizer between them. Initially we used flex so both have equal height. I want to be able to expand the other panel if one is collapsed (even if -- specially if -- the panel was already collapsed in the first place), and the expanded panel now fills the view. But if one panel has a height, it doesn't flex to fill the screen and its partner remains a header hanging in the middle of the view. Is there any way to achieve that behavior, to have a height but flex if it's the only expanded panel?

    Code:
    Ext.require([
        'Ext.panel.Panel',
        'Ext.resizer.Splitter'
    ]);
    
    Ext.define('SplitView', {
        extend              : 'Ext.panel.Panel',
        header              : false,
        
        statics                : {
            HORIZONTAL      : 'horizontal',
            VERTICAL        : 'vertical'
        },
        
        
        /* Required configs - note S in listConfigs and detailConfigs (so as not to override component things) */
        listConfigs         : {xtype: 'panel'},        // Can add store, bbar, w/h, other properties here
        detailConfigs       : {xtype: 'panel'},        // Configs for the other view go here
        splitType           : 'vertical',
        
        /* Optional configs - if no special formatting required, specify only the following */
        listPanel           : null,
        detailPanel         : null,
        
        /* Auxiliary configs/functions */
        defaultListConfig   : {
            itemId          : 'splitViewListPanel',
            partner         : 'splitViewDetailPanel',
            minHeight       : 135,
            collapsible     : true,
            animCollapse    : true,
            listeners       : {
                'beforecollapse' : function(p) {
                    if (p.up().down('#' + p.partner).collapsed) {
                        p.up().down('#' + p.partner).expand();
                    }
                }
            }
        },
        
        defaultDetailConfig : {
            itemId          : 'splitViewDetailPanel',
            partner         : 'splitViewListPanel',
            collapsible     : true,
            animCollapse    : true,
            listeners       : {
                'beforecollapse' : function(p) {
                    if (p.up().down('#' + p.partner).collapsed) {
                        p.up().down('#' + p.partner).expand();
                    }
                }
            }
        },
        
        initComponent       : function() {
            var splitView = this;
            
            if (splitView.listPanel)    splitView.listConfigs.xtype = splitView.listPanel;
            if (splitView.detailPanel)  splitView.detailConfigs.xtype = splitView.detailPanel;
            
            /* Get listPanel height from localStorage */
            if (Ext.supports.LocalStorage) {
                splitView.listConfigs.height = (localStorage[splitView.getXType() + '.' + splitView.listConfigs.xtype + '_height']) ?
                                                parseInt(localStorage[splitView.getXType() + '.' + splitView.listConfigs.xtype + '_height']) :
                                                splitView.listConfigs.height;
            }
            
            /* Flex settings */
            splitView.listConfigs.flex       = (splitView.listConfigs.height   ? 0 : 1);
            splitView.detailConfigs.flex     = 1; // (splitView.detailConfigs.height ? 0 : 1);
            
            splitView.defaultListConfig.collapseDirection = (splitView.splitType == SplitView.VERTICAL ? 'top' : 'left');
            splitView.defaultDetailConfig.collapseDirection = (splitView.splitType == SplitView.VERTICAL ? 'bottom' : 'right');
            
            // Defaults take precedence, but will allow extra settings
            var allListConfigs = Ext.apply({}, splitView.defaultListConfig, splitView.listConfigs);
            var allDetailConfigs = Ext.apply({}, splitView.defaultDetailConfig, splitView.detailConfigs);
            
            Ext.apply(splitView, {
                layout      : {
                    type    : (splitView.splitType == SplitView.VERTICAL ? 'vbox' : 'hbox'),
                    align   : 'stretch'
                },
                defaults    : splitView.defaults,
                items       : [
                    allListConfigs,
                    {
                        xtype   : 'splitter',
                        flex    : 0,
                        size    : 3
                    },
                    allDetailConfigs
                ]
            });
            
            splitView.callParent();
            
            splitView.down(splitView.listConfigs.xtype).on('resize',  function(panel, width, height) {
                if (Ext.supports.LocalStorage && panel.getXType() != 'panel') {
                    localStorage[splitView.getXType() + '.' + panel.getXType() + '_height'] = height;
                } else {
                    // TODO - save to local dat file
                }
            });
        }
    });
    Last edited by CSV; 22 Apr 2014 at 6:22 PM. Reason: Fixed code error

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,055
    Vote Rating
    69
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    It may not be possible for a panel to have a specific height and also flex, but there may be other ways. I tried getting your code running in a Fiddle, but got an uncaught reference error: "Ows is not defined". Often, having a working sample makes it easier for others to assist.
    https://fiddle.sencha.com/#home


    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

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    11
    Vote Rating
    1
    CSV is on a distinguished road

      0  

    Default


    Quote Originally Posted by Gary Schlosberg View Post
    It may not be possible for a panel to have a specific height and also flex, but there may be other ways. I tried getting your code running in a Fiddle, but got an uncaught reference error: "Ows is not defined". Often, having a working sample makes it easier for others to assist.
    https://fiddle.sencha.com/#home
    Thank you, I've edited the code to remove the undefined identifier. Maybe you could have a look now?

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    11
    Vote Rating
    1
    CSV is on a distinguished road

      1  

    Default


    After much trial and error (including setting the sizes manually, which was a pain to debug), it turns out there a simple solution was available after all... I changed the listeners to the following.

    Code:
    // Listeners for upper (list) panel
    listeners: {
        'beforecollapse': function(upper) {
            var lower = upper.up().down('#' + upper.partner);
            lower.flex = 1;                               // Force flex
            if (lower.collapsed) {
                lower.expand();
            }
            upper.up().updateLayout();
        },
        'expand': function(upper) {
            var lower = upper.up().down('#' + lower.partner);
            lower.flex = upper.up().listConfigs.flex;     // Reset to original flex or undefined
            upper.up().updateLayout();
        }
    }
    // Analogous for lower panel
    Much of the code posted before was cleaned up, that helped too.
    Setting the 'flex' manually, calling updateLayout, and then resetting the flex later achieved the behavior we needed for the pair of panels.

Thread Participants: 1

Tags for this Thread