3

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',  
                }, '->'
            ]
        }
    ];
user3546785
  • 157
  • 1
  • 7
  • 16

1 Answers1

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'
    }
];
jansepke
  • 1,933
  • 2
  • 18
  • 30
  • Hi, Thanks for the suggestion, tried it but the page itself won't open. Think it will not work this way of adding the button on the same level as pagingtoolbar. Something is missing or I may be wrong, Can you please let me know if there is any other way or if something is missing in your code. – user3546785 Apr 17 '14 at 22:04
  • ok I missed 2 things: you need to define everything in `bbar` (=bottombar) and you forgot to set a text for the button – jansepke Apr 17 '14 at 22:29
  • I tried using bbar but it is shrinking my result set grid size, It is looking so compact now, So this may not work for this issue. Any other ideas please?... – user3546785 Apr 18 '14 at 01:07