1. #1
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    11
    Vote Rating
    0
    tboemker is on a distinguished road

      0  

    Question What's the best way to make nested containers just as large as needed?

    What's the best way to make nested containers just as large as needed?


    This code creates a vbox nested in an hbox, but the vbox is not allocated any height, so nothing is visible on screen:
    Code:
    App = Ext.extend(Ext.Viewport, {
            initComponent: function(){
                    Ext.apply(this, {
                            layout: 'hbox',
                            items: [{
                                    xtype: 'container',
                                    layout: 'vbox',
                                    items: [{
                                            html: 'supercalifragilisticexpialidocious',
                                            style: {
                                                    borderStyle: 'solid',
                                                    borderWidth: '1px'
                                            }
                                    }]
                            }]
                    });
                    App.superclass.initComponent.call(this);
            }
    });
    
    Ext.onReady(function() {
            app = new App();
            app.show();
    });
    I read through some of the ExtJS code, and I see that the vbox layout results in a call to calculateChildBoxes to find the space needed by the innermost element, but that result is not being used to set the size of the vbox container.

    I noticed that BoxLayout has a provision for an overflow handler, but the only one defined ("None") doesn't do anything. By defining my own overflow handler and changing one line of code in BoxLayout.onLayout, I was able to get the program to allocate space. Here's the revised code:
    Code:
    Ext.layout.boxOverflow.grow = Ext.extend(Object, {
        constructor: function(layout, config) {
            this.layout = layout;
            Ext.apply(this, config || {});
        },
        handleOverflow: function(calcs, tSize) {
            return {
                targetSize: {
                    width: calcs.meta.maxWidth,
                    height: calcs.meta.minimumHeight // desiredHeight?
                }
            };
        },
        clearOverflow: Ext.emptyFn
    });
    
    App = Ext.extend(Ext.Viewport, {
        initComponent: function(){
            Ext.apply(this, {
                layout: {
                    type: 'hbox',
                    overflowHandler: 'grow'
                },
                items: [{
                    xtype: 'container',
                    layout: {
                        type: 'vbox',
                        overflowHandler: 'grow'
                    },
                    items: [{
                        html: 'supercalifragilisticexpialidocious',
                        style: {
                            borderStyle: 'solid',
                            borderWidth: '1px'
                        }
                    }]
                }]
            });
            App.superclass.initComponent.call(this);
        }
    });
    
    Ext.onReady(function() {
        app = new App();
        app.show();
    });
    I modified BoxLayout.onLayout to call the overflow handler unconditionally:
    Code:
        onLayout: function(container, target) {
            Ext.layout.BoxLayout.superclass.onLayout.call(this, container, target);
    
            var tSize = this.getLayoutTargetSize(),
                items = this.getVisibleItems(container),
                calcs = this.calculateChildBoxes(items, tSize),
                boxes = calcs.boxes,
                meta  = calcs.meta;
    
            if (true) { // condition used to be tSize.width > 0
                var handler = this.overflowHandler,
                    method  = meta.tooNarrow ? 'handleOverflow' : 'clearOverflow';
    
                var results = handler[method](calcs, tSize);
    My code seems to work, but I think that maybe I'm going in the wrong direction, for the following reasons:
    • I had to modify ExtJS code (BoxLayout.onLayout).
    • The absence of any other pre-defined overflow handlers suggests that this feature was abandoned.
    • The fact that overflow handlers are all defined in Ext.layout.boxOverflow suggests that end users weren't expected to write their own.
    Is there a better way to accomplish the same result?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    VBox and HBox do not support auto sizing.

    So for VBox, to do width you need to either specify the width of the children or use the align layout config. For height you have to specify a height or a flex.

    For HBox, to do height you need to either specify the height of the children or use the align layout config. For width, you have ot specify a width or a flex.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1