Компоновка компонентов в Сенча Touch 2

Question

Мне нужна помощь в Sencha Touch, потому что я не знаком с этим. Я хочу расположить две кнопки в центре страницы. Моя проблема в том, что контейнер не растягивается в месте между верхней и нижней панелью инструментов.

Ext.define("AccessibleMap.view.ChooseView", {
extend: "Ext.form.Panel",
alias: "widget.chooseview",

initialize: function () {

    console.log("Start");
    this.callParent(arguments);

    var topToolbar = {
        xtype: "toolbar",
        docked: "top",
        title: "Accessible Map",
    };

    var locationButton = {
        xtype: "button",
        maxWidth: '60%',
        minWidth: '50%',
        text: "Standort ausgeben",
        handler: this.onLocationBtnTap,
        scope: this,
        margin: '20 5 20 5'
    };

    var poisButton = {
        xtype: "button",
        maxWidth: '60%',
        minWidth: '50%',
        text: "POIs auswählen",
        handler: this.onPoiBtnTap,
        scope: this,
        margin: '20 5 20 5'
    };

    var buttonCont ={
        xtype: 'container',
        style:{
            background: 'red',
            'margin-top':' 14%'
        },
        layout:{
            type: 'vbox',
            align: 'center'
        },
        items:[
            locationButton,
            poisButton
        ]
    };

    //buttons for bottom-toolbar
    ...

    var tabpanel ={
        xtype: 'toolbar',
        docked: 'bottom',
        layout:{
            pack:'center',
            type: 'hbox'
        },
        items: [ homeButton, locateButton, optionsButton,  infoButton]
    };

    this.add([ topToolbar, buttonCont, tabpanel ]);
},

//listeners...
});

Я покрасил контейнер в красный цвет, поэтому я вижу, насколько он большой. Создание контейнера в полноэкранном режиме приводит к пустому контейнеру. Может кто-нибудь помочь мне, пожалуйста?

Answer 1

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

Ext.define("AccessibleMap.view.ChooseView", {
extend: "Ext.form.Panel",
alias: "widget.chooseview",
config:{
    layout:{
        type: 'vbox',
        pack: 'center'
    },
    items:[{
        xtype: "toolbar",
        docked: "top",
        title: "Accessible Map",
    },{
        xtype: 'container',
        flex: 1,
        layout:{
            type: 'vbox',
            align: 'center'
        },
        items: [{
            xtype: 'button',
                    ...
        }],
    }],
    listeners:[{ ...}]
}
});

Как видите, я определил макет на внешней панели для vbox с pack = center и внутренним контейнером для align = center. Более того, я определил сгиб для контейнера.