1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    devfishy is on a distinguished road

      0  

    Default Answered: How to stretch items inside a Segmented Button to 100%?

    Answered: How to stretch items inside a Segmented Button to 100%?


    Heya!

    My first post!

    Basically I have a Segmentedbutton that looks like this,
    And my question is, How do i strech the items within to 100% without specify 33.3%?

    And another question, Is it possible to have the items on diffrent rows? like 3 items on one row and 4 on the next and still keep it stretched?


    And if its possible, as you can see in this image, I want the two rows to be merged together and stretch 100%, I don't want to see the rounded corners at the end.

    Is anything of this possible?

    tehapp_advancedsearch.jpg

    Code:
    xtype: 'segmentedbutton',
                                   allowMultiple: true,
                                   docked: 'top',
                                   layout: {
                                       type: 'hbox',
                                       pack: 'center',
                                       align: 'stretchmax',
                                       labelWidth: '100%'
                                   },
                                   items: [
                                       {
                                           text: 'Title',
                                           width: '33.3%',
                                           labelWidth: '100%',
                                           modal: true
                                       },
                                       {
                                           text: 'Date',
                                           width: '33.3%',
                                           labelWidth: '100%',
                                           modal: true
                                       },
                                       {
                                           text: 'Release date',
                                           width: '33.3%',
                                           labelWidth: '100%',
                                           modal: true
                                       }
                                   ]
    Thanks guys!
    Regards
    Joachim

  2. Code:
    Ext.Viewport.add({
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            {
                xtype    : 'segmentedbutton',
                flex     : 1,
                defaults : {
                    flex : 1
                },
                items    : [
                    {
                        text : 'One'
                    },
                    {
                        text : 'Two'
                    },
                    {
                        text : 'Three'
                    }
                ]
            }
        ]
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    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

      1  

    Default


    Code:
    Ext.Viewport.add({
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            {
                xtype    : 'segmentedbutton',
                flex     : 1,
                defaults : {
                    flex : 1
                },
                items    : [
                    {
                        text : 'One'
                    },
                    {
                        text : 'Two'
                    },
                    {
                        text : 'Three'
                    }
                ]
            }
        ]
    });
    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.

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    devfishy is on a distinguished road

      0  

    Default


    I love you mate!

    Worked like a charm!

    Thanks alot!

  5. #4
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    102
    Answers
    2
    Vote Rating
    -1
    =NR= has a little shameless behaviour in the past

      0  

    Default


    ah such simple solution...thanks @mitchellsimoens