Align buttons to the left and right in Sencha Touch toolbar

Question

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

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 1

Use a spacer Here is an example

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

I hope that helps

Solution 2

The following works if you can use a titlebar instead of a toolbar

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

If you have to use a toolbar you can try

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

But the button text is not center aligned. Modifying the line-height CSS property may fix the alignment.

Comments

[code4jhon]

I already did but button doesn't go to the end of the toolbar there is some space ...

[code4jhon]

This actually works,the problem was that the default width of my togglefield