Sencha Touch：如何在底部停靠的工具栏中居中对齐两个按钮？

Posted 2023-02-25

【中文标题】Sencha Touch：如何在底部停靠的工具栏中居中对齐两个按钮？

【英文标题】：Sencha Touch: How to center align two buttons in bottom docked toolbar?

【发布时间】：2013-02-11 15:03:34

【问题描述】：

我想知道如何将底部停靠工具栏中的两个按钮居中对齐。我看到的按钮上解决此问题的唯一属性是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);
    
);

【参考方案1】：

你可以给你的toolbar 一个layout 配置：

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

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

【讨论】：

这是我根据这些建议制作的小提琴：senchafiddle.com/#xTZZg#k24Ni 仍然没有居中

您需要使用pack: center 而不是align: center。演示：senchafiddle.com/#xTZZg#k24Ni#2eQ9J

【参考方案2】：

您也可以使用 xtype:'spacer' 使这些居中。 Ext.Spacer 组件通常用于在 Ext.Toolbar 组件中的项目之间放置空间。请参考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来调整它的居中度