ExtJS 4 hbox (docked)

Trying to get a window with vbox/hbox layout to automatically compute a reasonable size.

by kzoon

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css">

CSS

.x-tab-bar-top{

    margin-right:60px!important;

}

JavaScript

Ext.onReady(function() {
    new Ext.window.Window({
        resizable: true,
        height: 300,
        width: 400,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [
            {
            xtype: 'tabpanel',
            title: false,
            border: 0,
            plain: true,
            flex: 6,
            dockedItems: [
                {
                id: "treeButtons",
                xtype: 'panel',
                dock: 'right',
                bodyStyle: {
                    background: '#DFE8F6'
                },
                layout: {
                    type: 'vbox',
                    align: 'center',
                    pack: 'center',
                    defaultMargins: {
                        bottom: 4
                    }
                },
                border: 0,
                width: 60,
                items: [
                    {
                    xtype: 'button',
                    html: '>',
                    width: 50},
                {
                    xtype: 'button',
                    html: '>>',
                    width: 50},
                {
                    xtype: 'button',
                    html: '<',
                    width: 50},
                {
                    xtype: 'button',
                    html: '<<',
                    width: 50}
                ]}
            ],

            items: [
                {
                id: 'myTree',
                title: "List",
                xtype: 'panel',
                html: 'my tree',
                border: 0
                }],
            {
                xtype: 'panel',
                title: 'Match',
                border: 0}
            ]},
        {
            xtype: 'splitter'},
        {
            xtype: 'panel',
            //header:{
            //    title: 'Selected'
            ///               },
            title: 'Selected',
           ...