CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
code4jhon
code4jhon

Reputation: 6034

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

    }

});

Upvotes: 5

Views: 22807

Answers (3)

ankurj
ankurj

Reputation: 29

use '->' between left and right buttons

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

Upvotes: 0

Jeff Martin
Jeff Martin

Reputation: 560

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.

Upvotes: 2

Darly
Darly

Reputation: 186

Use a spacer Here is an example

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

I hope that helps

Upvotes: 8

Related Questions