Arranging components in Sencha Touch 2

Question

I need some help in Sencha Touch because I'm not familiar with it. I want to arrange two buttons in the center of the page. My problem is, that the container doesn't stretch in the place between the top- and bottom-toolbar.

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...
});

I colored the container red, thus I can see how big it is. Making the container fullscreen results in an empty container. Can somebody help me please?

Answer 1

I found an answer to this problem. I changed the code so that I don't have to call the initialize function. Instead, I put everything in the config settings.

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:[{ ...}]
}
});

As you can see, I defined the layout in the outer Panel to vbox with pack = center and the inner container to align = center. Moreover I defined a flex for the container.