Results 1 to 7 of 7

Thread: Toolbar button alignment?

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710

    Default Toolbar button alignment?

    How can I align a set of three buttons to the right side of a top-docked toolbar, and have another single button aligned to the left? I guess in general my question is can I specify the alignment of buttons in tools bars? In ExtJS, you can use something like '->' to align buttons in toolbars, but don't see this as an option in Touch. I see examples of button alignment in the Kitchen Sink, but that is all against Panels using pack and align, not a Toolbar component.

    Here is my Toolbar component. I would like to have Home, Search, and Find a Store aligned to the right, and Back aligned to the left but hidden. I will call a method on the component to show the Back button when needed. I just need to figure out how to align the buttons.

    Code:
    mynamespace.views.mainToolbar = new Ext.extend(Ext.Toolbar, {
        id: 'mainToolbar',
        ui: 'light',
    
        initComponent: function() {
            Ext.apply(this, {
                items: [        
                    {
                        id: 'mainToolbarBack',
                        text: 'Back',
                        handler: this.tapHandler,
                        ui: 'back',
                        hidden: true
                    },
                    {
                        text: 'Home',
                        handler: this.tapHandler,
                        pressed: true
                    }, {
                        text: 'Search',
                        handler:  this.tapHandler
                    }, {
                        text: 'Find A Store',
                        handler: this.tapHandler
                    }
                ]         
            });
    
            mynamespace.views.mainToolbar.superclass.initComponent.apply(this, arguments);
        }
    
        ......

    Any ideas would be great, thanks!

  2. #2
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106

    Default

    Quote Originally Posted by Bucs View Post
    How can I align a set of three buttons to the right side of a top-docked toolbar, and have another single button aligned to the left? I guess in general my question is can I specify the alignment of buttons in tools bars? In ExtJS, you can use something like '->' to align buttons in toolbars, but don't see this as an option in Touch. I see examples of button alignment in the Kitchen Sink, but that is all against Panels using pack and align, not a Toolbar component.

    Here is my Toolbar component. I would like to have Home, Search, and Find a Store aligned to the right, and Back aligned to the left but hidden. I will call a method on the component to show the Back button when needed. I just need to figure out how to align the buttons.

    Code:
    mynamespace.views.mainToolbar = new Ext.extend(Ext.Toolbar, {
        id: 'mainToolbar',
        ui: 'light',
    
        initComponent: function() {
            Ext.apply(this, {
                items: [        
                    {
                        id: 'mainToolbarBack',
                        text: 'Back',
                        handler: this.tapHandler,
                        ui: 'back',
                        hidden: true
                    },
                    {
                        text: 'Home',
                        handler: this.tapHandler,
                        pressed: true
                    }, {
                        text: 'Search',
                        handler:  this.tapHandler
                    }, {
                        text: 'Find A Store',
                        handler: this.tapHandler
                    }
                ]         
            });
    
            mynamespace.views.mainToolbar.superclass.initComponent.apply(this, arguments);
        }
    
        ......

    Any ideas would be great, thanks!
    Use the spacer
    Code:
    leftb, {
       xtype : 'spacer'
    },rightb

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710

    Default

    Wow, you just pressed a big red & white "Easy Button"...literally. Thanks!

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    Or set the layout config on the toolbar to be pack: 'end'
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default

    How about if you are dealing with a TabPanel?

  6. #6

    Default Thanks

    Quote Originally Posted by evant View Post
    Or set the layout config on the toolbar to be pack: 'end'
    This works for me.

  7. #7

    Default Thank you.

    This works.
    Quote Originally Posted by evant View Post
    Or set the layout config on the toolbar to be pack: 'end'

Similar Threads

  1. Toolbar button alignment in IE
    By Jangla in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 26 Mar 2010, 7:01 AM
  2. [3.1] Toolbar Alignment
    By Lloyd K in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Jan 2010, 8:02 AM
  3. Toolbar Item Alignment
    By michael.roper in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 26 Mar 2009, 11:39 AM
  4. Toolbar Buttons Alignment
    By arieldmorales in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 25 Jul 2008, 11:23 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •