Align buttons to the left and right in Sencha Touch toolbar

extjs, sencha-touch, sencha-touch-2

Solution

Use a spacer Here is an example

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

I hope that helps

Problem

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('') } }); ```

Original source