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

Posted 2023-02-25

【中文标题】Sencha Touch 工具栏中的左右对齐按钮

【英文标题】：Align buttons to the left and right in Sencha Touch toolbar

【发布时间】：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('')

    

);

【参考方案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'
     
 ]