安裝Sencha Touch 2中的組件

我需要一些Sencha Touch的幫助，因爲我不熟悉它。我想在頁面中央安排兩個按鈕。我的問題是，容器不能在頂部和底部工具欄之間的位置拉伸。安裝Sencha Touch 2中的組件

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

我給容器塗上紅色，因此我可以看到它有多大。使容器全屏顯示將導致一個空容器。有人可以幫我嗎？

來源

2013-10-10 Pilzli

我找到了這個問題的答案。我改變了代碼，所以我不必調用初始化函數。相反，我將所有內容都放在配置設置中。如你所見，我將外層面板中的佈局定義爲vbox，其中pack = center，內層容器align = center。此外，我爲容器定義了一個flex。

來源

2013-10-15 09:39:02 Pilzli

安裝Sencha Touch 2中的組件

回答

相關問題