Layout to fit content inside

[minamu1]

Hello all,

I think this topic has been touched on by many people. I have tried looking on the forum for relevant answers and also revisited layouts and container documentation, to no avail. Maybe there is something wrong with my fundamental approach.

The layout you see in the image below is exactly what I want.

photo.PNG

However, I have had to do this by explicitly setting the height of the panel with the rounded edges. I want a gap of 6px around the button, which is right aligned in the view. The "Provide..." text is similarly aligned on the left with an equal gap above, left and below. However, the height of the panel had to be explicitly set to 40px, which I discovered through trial and error. But if I decide to use a big button, then I'll need to redefine the height, which I want to avoid doint.

Is there a smart/correct way to do this? I would simply like the panel to neatly wrap around the content inside with padding of 6px all round (I guess if the text size gets small, then I'll need to figure out how to equally space the top and bottom gaps there). I would like to do this irrespective of the button size (I want it to adapt automatically). Since the height of the text on the left will likely be smaller than the button height, the button height will be the limiting factor.

Do I have to explicitly get the button height with something like:

Ext.ComponentQuery.query('').element.getHeight()

and then explicitly set the height of the panel? If that's the case, then I've had trouble getting that to work correctly too, but that maybe another topic I guess.


My code for this panel is copied below, along with the relevant scss.

As always, any help would be greatly appreciated.

Thanks!

Ext.define('qxtapp.view.accounts.FacebookPanel', {
    extend: 'Ext.Container',
    xtype: 'facebookpanel',

    config: {
        title: 'Facebook',
        style: 'padding: 6px;border: 0px'
    },
    initialize: function() {
        this.callParent(arguments);
        var authButton = Ext.create('Ext.Button', {
            xtype: 'button',
            text: 'Authorize',
            ui: 'action-small',
            padding: 6,
            iconMask: true,
            right: 6,
            top: 6
        });
        var authButtonPanel = Ext.create('Ext.Container', {
            xtype: 'container',
            items: [authButton]
        });


        var authPanel = Ext.create('Ext.Container',{
            height: 40,                      // I want to avoid having to do this!!!
            width: '100%',
            cls: 'accountPanel',
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    items: [
                    {
                        xtype: 'container',
                        left: 6,
                        top: 8,
                        html: 'Provide Authorization'
                    }]
                },
                {
                    flex: 1,
                    xtype: 'container',
                    items:[authButton]
                }
            ]
        });
        this.add(authPanel);
    }
});

Relevant scss code:

.accountPanel {
    padding: 0;
    margin: 0;
           @if $include-border-radius { @include border-radius($panel-border-radius); }    
           border: 1px solid $default-blue;
           box-shadow: rgba(0.2, 0.2, 0.2, 0.8) 0 0.0em 0.0em;
           background: #fff;
}

[dawesi]

{
                xtype: 'container',
                margin: 6,
                padding: 6,
                style: 'border:2px solid #CCC;  background:white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px',
                layout: {
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'container',
                        flex: 1,
                        html: 'Provide Authorization',
                        padding: 8
                    },
                    {
                        xtype: 'button',
                        ui: 'action',
                        text: 'Authorize'
                    }
                ]
            }

That should do it...

[minamu1]

Excellent, works just right. Thanks!

[minamu1]

Ah, I selected my own response as the best answer. Not sure how I can undo this and select your answer.