1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Vote Rating
    -1
    Answers
    8
    raz0r1 is an unknown quantity at this point

      0  

    Default Answered: Border Layout: prevent e.g. center region from resizing

    Answered: Border Layout: prevent e.g. center region from resizing


    Hi,
    I have following to do:

    viewport with toolbar (north), expandable panel(west), panel (center) components.
    toolbar is fixed.
    now I want that the center-panel dont resizes when the west-panel is expanded.
    The west-panel should be above the center-panel till its collapsed again.

    i searched some time to find what i have to override and extend but i did not find anything.

    I would be very grateful i somebody could help solving this problem.

    greetings,
    christopher

  2. What you are asking for is not the border layout then. It should be something like the HBox layout, with a floating panel that slides in when called upon.

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    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 slemmon has much to be proud of

      0  

    Default


    I don't believe strictly speaking you can probihit the center region from resizing when it's in the border layout. I saw the following bulleted note on the border layout page in the API doc:
    Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
    http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border

    A
    re you wanting your west panel to always float over the top of your center region? Maybe instead of a west region you put the content into a Window, set its position to top-left, make it draggable: false, set the height to the height of the document body, and resizable only on the right-hand side?

  4. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,623
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    How is the west region being expanded? If you just want to stop people clicking the expand tool then you can just hide it:

    Code:
    new Ext.panel.Panel({
        ...
        layout: 'border',
        items: [
            {
                collapsed: true,
                collapsible: true,
                hideCollapseTool: true,
                region: 'west',
                ...
            }, {
                region: 'center',
                ...
            }
        ]
    });
    If you don't want to hide it, I think it'll take an almighty hack:

    Code:
    new Ext.panel.Panel({
        ...
        layout: 'border',
        items: [
            {
                collapsed: true,
                collapsible: true,
                region: 'west',
                ...
            }, {
                region: 'center',
                ...
            }
        ],
        listeners: {
            beforerender: function(panel) {
                var borderLayout = panel.getLayout();
    
                borderLayout.onPlaceHolderToolClick = function(e, target, owner, tool) {
                    this.floatCollapsedPanel({
                        getTarget: function() {
                            return false;
                        }
                    }, tool.client);
                };
            }
        }
    });
    I suspect this won't work if you're expanding it programmatically. Let us know if that's what you need.

  5. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    Answers
    102
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    What you are asking for is not the border layout then. It should be something like the HBox layout, with a floating panel that slides in when called upon.

  6. #5
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Vote Rating
    -1
    Answers
    8
    raz0r1 is an unknown quantity at this point

      0  

    Default


    Thanks very much for your answers. Sounds very interesting and I will try them by time but for know I changed my layout and used another way to display my panels.

    Thanks again,
    Christopher

  7. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Vote Rating
    -1
    Answers
    8
    raz0r1 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by skirtle View Post
    How is the west region being expanded? If you just want to stop people clicking the expand tool then you can just hide it:
    [...]
    If you don't want to hide it, I think it'll take an almighty hack:

    Code:
    new Ext.panel.Panel({
        ...
        layout: 'border',
        items: [
            {
                collapsed: true,
                collapsible: true,
                region: 'west',
                ...
            }, {
                region: 'center',
                ...
            }
        ],
        listeners: {
            beforerender: function(panel) {
                var borderLayout = panel.getLayout();
    
                borderLayout.onPlaceHolderToolClick = function(e, target, owner, tool) {
                    this.floatCollapsedPanel({
                        getTarget: function() {
                            return false;
                        }
                    }, tool.client);
                };
            }
        }
    });
    I suspect this won't work if you're expanding it programmatically. Let us know if that's what you need.

    I tried the second one but it does not work :/
    Code:
    'filterpanel': {
                    beforerender: function(panel) {
                        var borderLayout = panel.getLayout();
    
    
                        borderLayout.onPlaceHolderToolClick = function(e, target, owner, tool) {
                            this.floatCollapsedPanel({
                                getTarget: function() {
                                    return false;
                                }
                            }, tool.client);
                        };
    
    
                    }
                }

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,623
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    In case anyone else stumbles across this topic, there's more discussion about it in this thread:

    http://www.sencha.com/forum/showthread.php?144065

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,623
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I tried the second one but it does not work :/
    Could you try putting some logging in the beforerender handler to confirm that it is being run at all?

    If that doesn't help fix it, exactly what ExtJS version are you using? Which browsers have you tried?

  10. #9
    Sencha User
    Join Date
    May 2011
    Location
    Argentina
    Posts
    55
    Vote Rating
    3
    Answers
    2
    ferengidedalo is on a distinguished road

      0  

    Default


    I need to do this but programmatically... everything the same... floating panel inside border layout, wich is the charm to slide it out?

  11. #10
    Sencha User
    Join Date
    May 2011
    Location
    Argentina
    Posts
    55
    Vote Rating
    3
    Answers
    2
    ferengidedalo is on a distinguished road

      0  

    Default


    the charm is

    border.floatCollapsedPanel({getTarget:function(){return null}},panel);