Search code examples
extjssencha-touchsencha-touch-2

Align buttons to the left and right in Sencha Touch toolbar


How to align buttons in Sencha Touch toolbars at both sides left and right (one button to each side)?

In ExtJs I used to use '->'. But this doesn't seem to work in Sencha Touch.

Any ideas ?

EDIT button image not completely right aligned should appear here

EDIT here is my code

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

    }

});

Solution

  • Use a spacer Here is an example

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

    I hope that helps