Sencha Touch:如何将底部对接工具栏中的两个按钮居中对齐?

时间:2013-02-11 15:03:34

标签: javascript mobile extjs sencha-touch sencha-touch-2

我想知道如何在底部停靠的工具栏中居中对齐两个按钮。在我看到的buttosn上解决这个问题的唯一属性是centered,但是它们将按钮与按钮完全重叠,有没有办法将它们分组在中心?

以下是我一直在使用的一些代码:http://www.senchafiddle.com/#xTZZg#k24Ni

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    launch: function () {

        var panelNewForm = Ext.create('Ext.Panel', {
            id: 'panelNewForm',
            title: 'TEST',
            html: 'TEST',
            pack: 'center',
            items: [{
                xtype: 'toolbar',
                docked: 'bottom',
                layout: {
                    type: 'hbox',
                    align: 'center'
                },
                items: [{
                    ui: 'decline',
                    text: 'Cancel',
                    handler: function () {

                    }
                }, {
                    ui: 'confirm',
                    text: 'Save',
                    handler: function () {

                    }
                }]
            }]
        });
        Ext.Viewport.add(panelNewForm);
    }
});

2 个答案:

答案 0 :(得分:10)

您可以为toolbar layout配置:

layout: {
    pack: 'center',
    type: 'hbox'
}

这将使您的项目水平呈现在此工具栏的中心。

答案 1 :(得分:0)

你也可以使用 xtype:'spacer'来建立这些中心。 Ext.Spacer组件通常用于在Ext.Toolbar组件中的项之间放置空格。 Plz参考sencha docs

现在,这是您的代码示例:

 items: [{
                xtype: 'toolbar',
                docked: 'bottom',                
                items: [{
                    xtype:'spacer'
                },
                {
                    ui: 'decline',
                    text: 'Cancel',
                    handler: function () {

                    }
                }, {
                    ui: 'confirm',
                    text: 'Save',
                    handler: function () {

                    }
                },{
                    xtype:'spacer'
                }]
            }]

注意:您还可以通过提供各种flex

来调整其居中