0

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

我将容器涂成红色，因此我可以看到它有多大。使容器全屏会导致一个空容器。有人可以帮我吗？

4

1 回答 1

0

我找到了这个问题的答案。我更改了代码，这样我就不必调用初始化函数了。相反，我将所有内容都放在配置设置中。

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。此外，我为容器定义了一个 flex。

于 2013-10-15T09:39:02.817 回答