Sencha Touch 工具栏中的左右对齐按钮答案

【问题标题】：Align buttons to the left and right in Sencha Touch toolbarSencha Touch 工具栏中的左右对齐按钮
【发布时间】：2014-02-24 20:26:59
【问题描述】：

Sencha Touch 工具栏中的按钮如何左右对齐（左右各一个按钮）？

在 ExtJs 中，我曾经使用 '->'。但这似乎在 Sencha Touch 中不起作用。

有什么想法吗？

编辑

编辑这是我的代码

Ext.define('reestructura.view.ContratoList', {
    extend: 'Ext.List',
    xtype: 'contratolist',
    requires: 'Ext.field.Toggle',
    config: {
        onItemDisclosure: true,
        emptyText: 'El contrato no existe',
        store: 'Contratos',
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            style: 'background:darkgray',
            items: [{
                xtype: 'searchfield',
                placeHolder: 'Buscar contrato...'
            }, {
                xtype: 'button',
                iconCls: 'search',
                iconMask: true,
                ui: 'confirm',
                action: 'buscarContratos'
            },

            {
                xtype:'spacer'
            },
            {
                xtype: 'togglefield',
                label: 'simulación'
            }
            ]
        }],

        itemTpl : [
        '<p>{idContrato}&nbsp &nbsp {nombreGrupo} </p>',
        '<div style="font-size: 0.75em; color: darkgray">Saldo Pendiente: {saldoPendiente}</div>',  
        ].join('')

    }

});

【问题讨论】：

标签： extjs sencha-touch sencha-touch-2

【解决方案1】：

使用间隔这是一个例子

            {
                xtype: 'button',
                text: 'Button One'
            }, {
                xtype: 'spacer'
            }, {
                xtype: 'button',
                text: 'Button Two'
            }

希望对你有帮助

【讨论】：

我已经做了但是按钮没有到工具栏的末尾有一些空间...
这确实有效，问题是我的切换字段的默认宽度

【解决方案2】：

如果您可以使用标题栏而不是工具栏，则以下内容有效

{
     xtype: 'titlebar',
     docked: 'top',
     items: [
         {
             xtype: 'button',
             text: 'Button 1',
             align: 'left'
         },
         {
             xtype: 'button',
             text: 'Button 2',
             align: 'right'
         }
     ]
}

如果你必须使用工具栏，你可以尝试

 {
     xtype: 'toolbar',
     docked: 'top',
     items: [
         {
             xtype: 'button',
             text: 'Button 1',
             docked: 'left'
         },
         {
             xtype: 'button',
             text: 'Button 2',
             docked: 'right'
         }
     ]
}

但按钮文本未居中对齐。修改 line-height CSS 属性可能会修复对齐方式。

【讨论】：

【解决方案3】：

在左右按钮之间使用'->'

 xtype: 'titlebar',
 dock: 'bottom',
 items: [
     {
         xtype: 'button',
         text: 'Button 1'
     },
     {'->'},
     {
         xtype: 'button',
         text: 'Button 2'
     }
 ]

【讨论】：