Организация компонентов в Sencha 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 с колодой = центр и внутренний контейнер с ALIGN = центр. Кроме того, я определил гибкость для контейнера.