Custom Month/year picker with months buttons and a year scroller

Hi,

I need to build a custom Month/Year picker like this:

picker.png

I tried the following code:

Code:

{    xtype: 'container',
    layout: 'hbox',
    items: [
        {
            xtype: 'container',
            layout: 'vbox',
            flex: 3,
            items: [
                {
                    xtype: 'segmentedbutton',
                    allowMultiple: false,
                    defaults: {
                        xtype: 'button'
                    },
                    items: [
                        {
                            flex: 1,
                            text: 'Jan'
                        },
                        {
                            flex: 1,
                            text: 'Feb'
                        },
                        {
                            flex: 1,
                            text: 'Mar'
                        },
                        {
                            flex: 1,
                            text: 'Apr'
                        }
                    ]
                },
                {
                    xtype: 'segmentedbutton',
                    allowMultiple: false,
                    defaults: {
                        xtype: 'button'
                    },
                    items: [
                        {
                            flex: 1,
                            text: 'Jan'
                        },
                        {
                            flex: 1,
                            text: 'Feb'
                        },
                        {
                            flex: 1,
                            text: 'Mar'
                        },
                        {
                            flex: 1,
                            text: 'Apr'
                        }
                    ]
                },
                {
                    xtype: 'segmentedbutton',
                    allowMultiple: false,
                    defaults: {
                        xtype: 'button'
                    },
                    items: [
                        {
                            flex: 1,
                            text: 'Jan'
                        },
                        {
                            flex: 1,
                            text: 'Feb'
                        },
                        {
                            flex: 1,
                            text: 'Mar'
                        },
                        {
                            flex: 1,
                            text: 'Apr'
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'datepicker',
            flex: 2,
            name: 'year',
            align: 'center',
            slotOrder: ['year'],
            doneButton: false,
            cancelButton: false,
            toolbar: { hidden: true },
            modal: false,
            data: years
        }
    ]
}

However, as a result I get that:

Picker.jpg

The problem is that the datepicker is recovering the months buttons.

I don't know how to constrain it as the right element of the master horizontal container.

What am I doing wrong?

Is there a better way to do it?

Thanks in advance for your help.

Custom Month/year picker with months buttons and a year scroller