How to align this button to the right of the screen?

I've tried adding style: float: right 开发者_运维问答to the button but it isn't working.

myapp.cards.home.add({
         xtype: 'button',
         id: 'previmagebutton',
         // text: 'p',
         iconCls: 'arrow_left',
         iconMask: true,
         style: 'float: right'

     });


  myapp.cards.home = new Ext.Panel({
        scroll: 'vertical',
        id: "home-card",
        layout:{
            type:"vbox",
                            align:"center"

        },
        items: [header]
    }); 

  myapp.mainPanel = new Ext.Panel({
        fullscreen: true,
        layout: "card",
        cardAnimation: 'slide',
        items: [myapp.cards.home]
    });

I have to use the add method if that is what's causing the problem. Many thanks.

In your myapp.cards.home object you have the layout set up to align:"center".

I've succeeded in creating a floating button by using

    floating:true

config on the button. It is a private member, so I'm still looking for an official way.

This should work ::

layout : {
    type : 'vbox',
    align : 'left'
}

or you can add a spacer if its in the toolbar, or if you stretch the element, then add another hbox element on its side with a flex that occupies as much space that you don't need