Results 1 to 9 of 9

Thread: Toolbar Item Alignment

  1. #1
    Ext User
    Join Date
    Mar 2007
    Location
    Perth, Australia
    Posts
    7

    Default Toolbar Item Alignment

    Is there any way to align toolbar items/buttons to different alignments? I am trying to get some buttons to be aligned left, and then others aligned right o my toolbar, but am having no luck. I tried setting the class on the button item to a style that would float it to the right, but the toolbars seem to be made up of table cells instead..

    Any hints on how to achieve something like this?

    Code:
    Home | Menu 1 | Menu 2              <-- stretchy -->                 Search | Help | Logout

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I think there's a case for refactoring the Toolbar to use floated DIVs rather than table cells.

    Not only for teh alignment reason, but left/right alignment would then be easy.

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    The table is needed for vertical alignment of textfields, raw text, selects and whatever else you throw in a toolbar. Floats also don't take up space.

    Aligning two toolbars as the original poster is describing can be done by floating two toolbars, one left and one right. You will probably want to apply the background CSS to the element which contains the toolbars and override the default toolbar background so they don't have one.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Location
    Perth, Australia
    Posts
    7

    Default

    Thanks Jack, I'll give that a go... now i just need to find out what that CSS class is!

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    .x-toolbar, the first class in toolbar.css

  6. #6

    Default

    Is adding a td with width set to 100% a bad idea? Something like this (but cleaned up to use addItem() etc of course):
    Code:
    Ext.Toolbar.prototype.addSpacer = function() {
        var td = this.nextBlock();
        Ext.get(td).setStyle( 'width', '100%' );
    }
    It does work in Firefox 2.0 and IE 6...

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    If it works for you, you are welcome to do it. In some doctypes and browsers it may not work though.

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    7

    Default I haven't found a good solution to this ...

    Is there an elegant or recommended solution to this yet?

  9. #9
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    708

    Default

    Ext.Toolbar.Fill API

    The easiest way is to add an item '->' to push the rest of the toolbar items to the right, code snippet from API linked above:

    Code:
    new Ext.Panel({
    	tbar : [
    		'Item 1',
    		{xtype: 'tbfill'}, // or '->'
    		'Item 2'
    	]
    });

Similar Threads

  1. Toolbar item enhancement. Item align:"right" confi
    By Animal in forum Ext 2.x: Help & Discussion
    Replies: 40
    Last Post: 8 Jan 2008, 6:28 PM
  2. rev4 - Setting id on column cancels alignment
    By bone in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Mar 2007, 1:11 AM
  3. combobox datefield icon alignment
    By vtswingkid in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Mar 2007, 3:33 PM
  4. Text alignment
    By INeedADip in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 24 Feb 2007, 9:00 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
  •