Results 1 to 10 of 10

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

  1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Answers
    8
    Vote Rating
    0
      0  

    Default 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,154
    Answers
    501
    Vote Rating
    249
      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,790
    Answers
    583
    Vote Rating
    390
      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 User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102
    Vote Rating
    87
      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
    Answers
    8
    Vote Rating
    0
      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
    Answers
    8
    Vote Rating
    0
      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,790
    Answers
    583
    Vote Rating
    390
      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,790
    Answers
    583
    Vote Rating
    390
      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
    Answers
    2
    Vote Rating
    3
      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
    Answers
    2
    Vote Rating
    3
      0  

    Default

    the charm is

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

Posting Permissions

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