Results 1 to 2 of 2

Thread: Borderlayout expand/collapse region (no borders)

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    4

    Default Borderlayout expand/collapse region (no borders)

    I have a borderlayout with an east region and a center region. I'd like the east region hidden initially. When the user clicks a button, validation of the data entry in the center region will occur, and if there're errors I want them displayed in the east region.

    I've got this working by hiding/showing the east region, but I'd like to animate the hide/show. I can't seem to figure this out.

    Arguably the expand/collapse feature will do what I want, but I don't want the user to be able to expand or collapse the region. Even if I set the collapseMode to mini and collapsible to false, the user still sees the splitbar (when the region is collapsed). I'd prefer to obscure anything that would suggest that the user could expand/collapse the region (or that the region even exists).

    Any ideas?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    I think this does what you want. It both collapses and hides the east region. To ensure everything animates cleanly the east region is initially created visible and then hidden immediately.

    Code:
    var panel = new Ext.Panel({
        height: 600,
        layout: 'border',
        renderTo: Ext.getBody(),
        width: 600,
        items: [
            {
                region: 'center',
                title: 'Center',
                tbar: [{
                    text: 'Click',
                    handler: function() {
                        panel.east.show();
                        panel.east.expand();
                    }
                }]
            }, {
                ref: 'east',
                region: 'east',
                title: 'East',
                width: 200
            }
        ]
    });
    
    panel.east.hide();
    panel.east.collapse();

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •