在Sencha Touch工具栏中左右对齐按钮

Question

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

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

有什么想法吗？

EDIT

EDIT 这是我的代码

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('')

    }

});

Answer 1

使用垫片 这是一个例子

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

我希望有帮助

Answer 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'
         }
     ]
}

但按钮文字不是居中对齐的。修改行高CSS属性可以修复对齐。

Answer 3

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

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