1. #21
    Sencha User
    Join Date
    Feb 2009
    Posts
    5
    Vote Rating
    0
    yclick is on a distinguished road

      0  

    Default


    add

    ui: 'default-toolbar'

    in the button's config

  2. #22
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    128
    Vote Rating
    1
    Tod is on a distinguished road

      0  

    Default


    Using 'default-toolbar' doesn't give you buttons that look like buttons in a toolbar. Neither does a ui of 'footer' give you the look and feel of 3.4 fbar. So, I think the original question of how to easily do this in 4.x still applies. Any ideas?
    -Tod

  3. #23
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    There's def something funky going on in 4.07 (haven't tested on 4.1). Although the API docs state that this:


    Code:
    bbar:[{ xtype:'button', text:'Button 1'}]
    is the same as

    Code:
    dockedItems:[{    xtype:'toolbar',    dock:'bottom',    items:[{ xtype:'button', text:'Button 1'}]}]
    it very obviously is not, check it out:

    bbar version:
    bbar.jpg


    dockedItems version:
    docked.jpg





    Ps. I pasted in using code tags, but this forums editor ff-ed it all up as per usual and I can't be bothered to correct it again.
    twitter: @realjax

  4. #24
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    What also worries me is that this thread has over 27000 views..






    HELLO SENCHA!!!!! ANYONE THERE???

    Maybe there's something lacking in the toolbar button theming/styling area???????
    twitter: @realjax

  5. #25
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    Ext 4.1.1 Standard (framed) buttons in toolbars:

    Code:
     {
        xtype: 'toolbar',
        ui: 'footer', // always show button frame
        items: [ { text: 'mybutton' } ]
    }
    Relevant code snippet is in Ext.toolbar.Toolbar#onBeforeAdd

    Code:
        onBeforeAdd: function(component) {
            if (component.is('field') || (component.is('button') && this.ui != 'footer')) {
                component.ui = component.ui + '-toolbar';
            }
    
            // Any separators needs to know if is vertical or not
            if (component instanceof Ext.toolbar.Separator) {
                component.setUI((this.vertical) ? 'vertical' : 'horizontal');
            }
    
            this.callParent(arguments);
        },
    If you are sure you never ever want those frameless buttons in toolbars, you could override Ext.toolbar.Toolbar with this not-so-nice hack:
    Edit: the paging toolbar really does look better with non-framed buttons though

    Code:
        onBeforeAdd: function(component) {
            var componentUi = component.ui;
            this.callParent(arguments);
            component.ui = componentUi;
        }

  6. #26
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    1
    leoyang is on a distinguished road

      1  

    Default


    I am using Ext 4.1.1 and this works for me:
    Config the button inside a toolbar as:
    Code:
    cls:'x-btn-default-small',
    border: 1,
    style: {
        borderColor: '#D1D1D1',
        borderStyle: 'solid'
    },
    It looks like a normal button.

  7. #27
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    jin_yun_guang is on a distinguished road

      0  

    Default



  8. #28
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    trubit is on a distinguished road

      0  

    Default


    This follows themes colors and is propably easiest way how to do it in Ext 4.1
    Code:
    { xtype: 'button', 
        text: 'Button',
        listeners: {
            render: function() {
                this.addCls("x-btn-default-small");
                this.removeCls("x-btn-default-toolbar-small");
            }
        }
    }

  9. #29
    Sencha User
    Join Date
    Nov 2010
    Posts
    3
    Vote Rating
    0
    yufulou is on a distinguished road

      0  

    Default


    Quote Originally Posted by trubit View Post
    This follows themes colors and is propably easiest way how to do it in Ext 4.1
    Code:
    { xtype: 'button', 
        text: 'Button',
        listeners: {
            render: function() {
                this.addCls("x-btn-default-small");
                this.removeCls("x-btn-default-toolbar-small");
            }
        }
    }
    It does not work in IE 8...

  10. #30
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    80
    Vote Rating
    0
    fily55 is on a distinguished road

      0  

    Default


    Quote Originally Posted by trubit View Post
    This follows themes colors and is propably easiest way how to do it in Ext 4.1
    Code:
    { xtype: 'button', 
        text: 'Button',
        listeners: {
            render: function() {
                this.addCls("x-btn-default-small");
                this.removeCls("x-btn-default-toolbar-small");
            }
        }
    }
    This solution seems to do the trick and is pretty logical.