1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default Answered: Toolbars and button alignment

    Answered: Toolbars and button alignment


    Aligning stuff in a toolbar left right and center is no problem, but now I'm looking for a way to combine alignments.

    I.e. I'm looking to have a first set of buttons centered in the middle and then a couple more aligned to the right.

    can anybody help me on this one?

  2. Just start with a fill

    Code:
    Ext.onReady(function() {
    
    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: document.body,
        width: 500,
        items: [
            '->',
            {
                // xtype: 'button', // default for Toolbars
                text: 'Button'
            },
            {
                xtype: 'splitbutton',
                text: 'Split Button'
            },
        // begin using the right-justified button container
            '->', // same as { xtype: 'tbfill' }
            {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
            }
        ]
    });
      
      
                });

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    You could try to use the fill http://docs.sencha.com/ext-js/4-0/#!...t.toolbar.Fill to align to the right

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    You could try to use the fill http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Fill to align to the right
    I was like EUREKA at first, but it only seems to do half of what I want when I set pack to start and I don't need buttons at the start. =/
    center and end.

    Or am I missing a setting on the fill item?

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Just start with a fill

    Code:
    Ext.onReady(function() {
    
    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: document.body,
        width: 500,
        items: [
            '->',
            {
                // xtype: 'button', // default for Toolbars
                text: 'Button'
            },
            {
                xtype: 'splitbutton',
                text: 'Split Button'
            },
        // begin using the right-justified button container
            '->', // same as { xtype: 'tbfill' }
            {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
            }
        ]
    });
      
      
                });

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    Just start with a fill

    Code:
    Ext.onReady(function() {
    
    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: document.body,
        width: 500,
        items: [
            '->',
            {
                // xtype: 'button', // default for Toolbars
                text: 'Button'
            },
            {
                xtype: 'splitbutton',
                text: 'Split Button'
            },
        // begin using the right-justified button container
            '->', // same as { xtype: 'tbfill' }
            {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
            }
        ]
    });
      
      
                });
    ah yes...

    it looks beautiful =3

    thanks!

Thread Participants: 1

Tags for this Thread