Right align a button in extjs dockeditems with pagingtoolbar on left

Question

I am working on Extjs 4.2, The following is my piece of code. The pagination toolbar is aligned to the left of the panel. I want the InfoButton to be aligned to the right of the panel. I want pagination bar and the button on the same line with the pagingtoolbar completely left aligned and InfoButton completly right aligned. Right now, the pagingtoolbar is completly left aligned but the InfoButton is like center aligned and I tried doing the margin alignment and the padding alignment. But it still remains the same. Can someone help me if I am missing something here or what I should be doing to right align the button.

this.dockedItems = [
        {
            xtype: 'pagingtoolbar',
            itemId: 'FirstToolbar',
            dock:'bottom',
            store: Store,
            displayInfo: true,
            displayMsg: 'Displaying info {0} - {1} of {2}',
            emptyMsg: "No info to display",
            items: [
                {
                    xtype: 'container',
                    flex: 1
                }, '->',
                {
        xtype: 'button',                        
                    cls:'InfoButton', 
        itemId: 'InfoButton',                       
                    dock:'bottom',  
                }, '->'
            ]
        }
    ];

Answer 1

you need to define the button on the same level as the pagingtoolbar:

this.bbar = [
    {
        xtype: 'pagingtoolbar',
        itemId: 'FirstToolbar',
        store: Store,
        displayInfo: true,
        displayMsg: 'Displaying info {0} - {1} of {2}',
        emptyMsg: "No info to display"
    }, '->',
    {
        xtype: 'button',                        
        cls:'InfoButton', 
        itemId: 'InfoButton',
        text: 'sample'
    }
];