Question

I am using Sencha touch for the first time, I have managed to get some menu items to show, but I would like it to move/float to the right is anyone sure how to do this?

this is my code for the buttons:

spaceosaur.views.Home = Ext.extend(Ext.Panel, {
initComponent: function(){

this.dockedItems = [{
        xtype: 'toolbar',
        title: 'Spaceosaur',
        items: [                 
            { xtype: 'segmentedbutton', items: [
              { iconMask: true, iconCls: '', text: 'Featured', pressed : true },
              { iconMask: true, text: 'Latest' },
              { iconMask: true, text: 'Popular' },
            ]},
            { iconMask: true, ui: 'action', text: 'Refresh' },

        ]
    }]

    spaceosaur.views.Home.superclass.initComponent.call(this);
}

});

Ext.reg(‘home’, spaceosaur.views.Home);

And an example of site is here: http://cameronmlewis.com/pad/

Answer 1

The easiest way to change the alignment of the buttons in a toolbar is to add spacers.

To align something to the right you could do the following:

 items: [
    {xtype: 'spacer'},
    { iconMask: true, ui: 'action', text: 'Refresh' }
 ]

The spacer would push everything to the right. You could get creative with the flex & width properties of the spacer and/or the buttons to get everything to space out and line up properly.