Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    41
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default Answered: Layout to fit content inside

    Answered: Layout to fit content inside


    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:
    Code:
    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!


    Code:
    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:
    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;
    }

  2. Excellent, works just right. Thanks!

  3. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,082
    Answers
    24
    Vote Rating
    41
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    Code:
    {
                    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...
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  4. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    41
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default


    Excellent, works just right. Thanks!

  5. #4
    Sencha User
    Join Date
    Jun 2009
    Posts
    41
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread