Как центрировать кнопку в ее контейнере в Ext JS 4?

Я использую Ext JS 4 для создания веб-сайта, и мне нужно центрировать кнопку в ее контейнере, но я не могу этого добиться.

Я искал в Интернете информацию о том, как это сделать, и нашел несколько ответов, в которых говорится об использовании layout, но в моем случае это не сработало:

const submit = Ext.create('Ext.Button', {
    text     : 'search',
    scale: 'large',
    renderTo : Ext.getBody(),
    listeners: {
    click: function() {

        }
    },
    layout: {
        align: 'middle',
        pack: 'center',
        type: 'hbox'
    },
});

Весь мой код:

function init(results, checkInDate, checkOutDate, array) {
    if (results! = "") {
        results = JSON.parse(results);
    }
    const todaysDate = new Date();
    var visitDay = todaysDate.getDate();
    var visitMonth = todaysDate.getMonth()+1;
    var visitYear = todaysDate.getFullYear();
    var leavingDay = todaysDate.getDate();
    var leavingMonth = todaysDate.getMonth()+1;
    var leavingYear = todaysDate.getFullYear();
    var array1 = new Array();
    var i2 = 0;
    var i3 = 1;
    for(var i = 0; i<array.length; i++) {
        array1.push({ 'name': array[i],  'price1': results[i2],  'price2': results[i3]})
        i2 = i2 + 2;
        i3 = i3 + 2;
    }

    Ext.application({
        name: 'MyApp',
        launch: function() {
            const datePickers = Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                width: 300,
                bodyPadding: 10,
                items: [{
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    anchor: '100%',
                    fieldLabel: 'Check In:',
                    name: 'from_date',
                    value: checkInDate,
                    listeners: {
                        'change': function(me) {
                            const visitDate = me.getSubmitValue();
                            visitMonth = '';
                            visitYear = '';
                            visitDay = '';
                            for(var i=0; i<2; i++) {
                                visitDay = visitDay + visitDate.charAt(i);
                            }
                            for(var i=3; i<5; i++) {
                                visitMonth = visitMonth + visitDate.charAt(i)
                            }
                            for(var i=6; i<10; i++) {
                                visitYear = visitYear + visitDate.charAt(i);
                            }
                        }
                    }
                }, {
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    anchor: '100%',
                    fieldLabel: 'Check Out:',
                    name: 'to_date',
                    value: checkOutDate,
                    listeners: {
                        'change': function(me) {
                            const leavingDate = me.getSubmitValue();
                            leavingMonth = '';
                            leavingYear = '';
                            leavingDay = '';
                            for(var i=0; i<2; i++) {
                                leavingDay = leavingDay + leavingDate.charAt(i);
                            }
                            for(var i=3; i<5; i++) {
                                leavingMonth = leavingMonth + leavingDate.charAt(i)
                            }
                            for(var i=6; i<10; i++) {
                                leavingYear = leavingYear + leavingDate.charAt(i);
                            }
                        }
                    }
                }]
            });

            //This is the item I want to center:
            const submit = Ext.create('Ext.Button', {
                text     : 'Search',
                scale: 'large',
                renderTo : Ext.getBody(),
                listeners: {
                    click: function() {

                    }
                }
            });

            var store = Ext.create('Ext.data.Store', {
                storeId:'prices',
                fields:['name', 'price1', 'price2'],
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });

            const grid = Ext.create('Ext.grid.Panel', {
                store: Ext.data.StoreManager.lookup('prices'),
                columns: [
                    { text: 'Name',  dataIndex: 'name', width: 200},
                    { text: 'Price1', dataIndex: 'price1', width: 135},
                    { text: 'Price2', dataIndex: 'price2', width: 135},
                ],
                renderTo: Ext.getBody()
            });

            store.getProxy().data = array1;
            store.load();

            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    title: 'Filter',
                    region: 'west',
                    collapsible: true,
                    split: true,
                    titleCollapse: true,
                    items: [
                        {  
                            items: datePickers
                        },
                        {
                            //I want to center this button horizontally:
                            items: submit
                        }

                    ],          
                }, {
                    title: 'prices',
                    region: 'center',
                    collapsible: false,
                    items: {
                        items: grid
                    }
                }]
            });
        }
    });
}

Итак, на данный момент кнопка отображается в этом положении:

Но я бы хотел, чтобы там было:

Любые идеи о том, как этого добиться?

Заранее спасибо!

Обновлено: ответ кода pvlt

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
       title: 'Filter',
       region: 'west',
       collapsible: true,
       split: true,
       titleCollapse: true,
       width: 300,
       layout: {
           type: 'hbox',
           align: 'middle',
           pack: 'center',
       },
           items: [
              {
                   items:datePickers
              },
              {
                   items: submit
              }
           ],           
       }, {
            title: 'prices',
            region: 'center',
            collapsible: false,
            items: {
               items: grid
            }
       }]
});