1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default Unanswered: How do I make buttons "float"?

    Unanswered: How do I make buttons "float"?


    Hi, I want to be able to set buttons to a specific width and then have them 'float', like you can make html objects do with the css 'float' property. Basically, I want to be able to generate an arbitrarily long list of buttons, and have them all fit themselves into a certain area of the screen. I tried to make the button float with the 'style' config option, but I'm not even sure this did anything at all. What's the best way to 'float' buttons?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    Answers
    3467
    Vote Rating
    834
    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


    What widget are the buttons children of and if you are specifying a layout what is it?
    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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    The buttons are in 'cards' of the card layout with no layout specified for each card. I don't have the code with me right now but I'm pretty sure it's organized like this:


    Code:
    var panel =Ext.create('Ext.Panel',{    
        layout:'card',    
        items:[
            {
                 html:"First Item",
                 items: [
                     {
                          xtype: "button",
                          text : "derp"
                     },
                     {
                          xtype: "button",
                          text : "derp2"
                     }
                 ]
             }
        ]
    });


  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    Answers
    3467
    Vote Rating
    834
    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


    Ok, you can still use the CSS float on the buttons since you are using the default layout. I would give the buttons a cls config value and use that to mess with the button.
    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.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    Okay, can you give me a verbatim example of the proper code I would use here? Because I thought I was applying CSS float property, but nothing appears to be happening:

    Code:
                var panel = Ext.create('Ext.Container', {
                    fullscreen: true,
                    layout: 'card',
                    items: [ // begin Container items
                        { // begin main screen
                            xtype : 'panel',
                            html  : 'procfam info',
                            scrollable: {
                                direction: 'vertical'
                                },
                            items: [
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    width: '100px',
                                    style: {
                                        float:'right'
                                        }
                                    },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    width: '100px',
                                    style: {
                                        float: 'left'
                                        }
                                    },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    width: '100px',
                                    style: {
                                        float: 'left'
                                        }
                                    }
     // leaving off all the terminating delimiters, you get the point
    Thanks.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Madagascar
    Posts
    24
    Vote Rating
    0
    Fayt is on a distinguished road

      0  

    Default


    add this to your code

    Code:
     layout: 'hbox',

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    @fayt: this doesn't appear to help. Now the buttons take up all available vertical space unless I explicitly specify a height, and they still don't wrap around when they take up more room than a single row can provide. I see no evidence that the float property is doing anything at all.

    Code:
                var panel = Ext.create('Ext.Container', {
                    fullscreen: true,
                    layout: 'card',
                    items: [ // begin Container items
                        { // begin main screen
                            xtype : 'panel',
                            layout: 'hbox',
                            scrollable: {
                                direction: 'vertical'
                                },
                            items: [
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    height: '25px',
                                    style: {
                                        float: 'left'
                                        }
                                    },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    height: '25px',
                                    style: {
                                        float: 'left'
                                        }
                                   },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    height: '25px',
                                    style: {
                                        float: 'left'
                                        }
                                    }
     // leaving off all the terminating delimiters, you get the point

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi