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

[devfishy]

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

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

[mitchellsimoens]

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

[devfishy]

I love you mate!

Worked like a charm!

Thanks alot!