Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    4
    Vote Rating
    0
    andaction is on a distinguished road

      0  

    Default Border layout: Dynamic splitter

    Border layout: Dynamic splitter


    Hi,

    I defined a panel with a border layout and three child containers. In my application these child containers are "frames" which can host different (or none) components, depending on the application state. In case a frame contains a child component I there should be a splitter. If a frame contains no child component, the splitter should be invisible. Is it possible to dynamically show/hide the splitter of a frame after it has been inserted into the panel with the border layout?

    Code:
     
    {
                xtype:'container',
                region:'center',
                layout:'border',
                items: [
                    {
                        id: 'frame1',
                        xtype: 'container',
                        region: 'north',
                        layout: 'fit'
                    },
                    {
                        id: 'frame2',
                        xtype: 'panel',
                        layout: 'fit',
                        region: 'west',
                        split: 'true'
                    },
    ...
    }
    thanx

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    This should work:

    Code:
    var panel = Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
            itemId: 'south-panel',
            margins: '0 5 5 5'
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
        }],
        renderTo: Ext.getBody()
    });
    
    var sp = panel.down('#south-panel');
    sp.splitter.el.hide();
    Regards,
    Scott.

Thread Participants: 1