Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: Right align toolbar items

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487
    Vote Rating
    6
      0  

    Default Right align toolbar items

    Before I start, I have looked around the forums and found posts that say I should use the '->' as a first item to make the toolbar items right aligned but it doesn't seem to work.

    Here's my toolbar setup code:

    Code:
            var regionCombo = new Ext.form.ComboBox({
                store            : regionStore,
                displayField    : 'location',
                typeAhead        : true,
                mode            : 'local',
                triggerAction    : 'all',
                emptyText        : 'Select a location...',
                selectOnFocus    : true,
                width            : 130,
                tpl                : resultTpl,
                iconCls: 'no-icon'
            });
            
            var tabToolBar = new Ext.Toolbar ({
                items : [
                    '->',
                    new Ext.Toolbar.TextItem ("Jump to another location to focus your search: "), 
                    regionCombo
                ]
            });
    And here's the page it's on: http://www.holiday-chateau.com/index.php?id=10790

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487
    Vote Rating
    6
      0  

    Default

    Anyone able to help with this?

  3. #3
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676
    Vote Rating
    9
      0  

    Default

    seems to be related to my post with toolbar grouping. When you examine the HTML you see that your items are in the left, right is empty. So maybe you try to start with a dummy item for the left like
    {xtype: 'tbtext', text: ' '},'->',{...}
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487
    Vote Rating
    6
      0  

    Default

    That does put the required items in the right table but it's all still left aligned

  5. #5
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676
    Vote Rating
    9
      0  

    Default

    have the same problem. Defining width causes "overnesting", i get
    <td align="right">
    <table>
    <tr>
    <td>
    <table>..right toolbar items..</table>
    </td>
    </tr>
    </table>
    </td>

    and tables are stretched automatic, so the align doesn't work as expected.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    90
      0  

    Default

    You have inserted your "tabToolBar" Toolbar object as a CHILD ITEM of a Toolbar. Read the code.

    Code:
     tbar : [tabToolBar],

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    90
      0  

    Default

    And you are using a custom toolbar layout class in Ext.layout.ToolbarLayout.js which defeats the provided, correctly-functioning ToolbarLayout.

  8. #8
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487
    Vote Rating
    6
      0  

    Default

    Ah. I presume you mean the square brackets? In which case I've corrected that and it's still left aligned:

    Code:
            var tabToolBar = new Ext.Toolbar ({
                items : [
                    '->',
                    new Ext.Toolbar.TextItem ("Jump to another location to focus your search: "), 
                    regionCombo
                ]
            });
    
            var superTabs = new Ext.TabPanel({
                renderTo: 'super-tab-panel',
                minTabWidth: 115,
                width: 680,
                height: 575,
                autoWidth: false,
                autoHeight: false,
                enableTabScroll: true,
                deferredRender: false,
                activeTab: 0,
                tbar: tabToolBar,
    ...

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    90
      0  

    Default

    Now remove the Ext.layout.ToolbarLayout.js script.

  10. #10
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487
    Vote Rating
    6
      0  

    Default

    Can't - it's required for the wizard on tab 3. Looks like I'll have to stick with left aligned then.

Page 1 of 3 123 LastLast

Posting Permissions

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