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

如您所见，我将外部Panel中的布局定义为vbox，其中pack = center，内部容器为align = center。此外，我为容器定义了一个flex。

在Sencha Touch 2中安排组件

1 个答案: