Toolbar button style

[yclick]

add

ui: 'default-toolbar'

in the button's config

[Tod]

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

[realjax]

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

bbar:[{ xtype:'button', text:'Button 1'}]

is the same as

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.

[realjax]

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???????

[mberrie]

Ext 4.1.1 Standard (framed) buttons in toolbars:

 {
    xtype: 'toolbar',
    ui: 'footer', // always show button frame
    items: [ { text: 'mybutton' } ]
}

Relevant code snippet is in Ext.toolbar.Toolbar#onBeforeAdd

    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

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

[leoyang]

I am using Ext 4.1.1 and this works for me:
Config the button inside a toolbar as:

cls:'x-btn-default-small',
border: 1,
style: {
    borderColor: '#D1D1D1',
    borderStyle: 'solid'
},

It looks like a normal button.

[jin_yun_guang]

[trubit]

This follows themes colors and is propably easiest way how to do it in Ext 4.1

{ xtype: 'button', 
    text: 'Button',
    listeners: {
        render: function() {
            this.addCls("x-btn-default-small");
            this.removeCls("x-btn-default-toolbar-small");
        }
    }
}

[yufulou]

This follows themes colors and is propably easiest way how to do it in Ext 4.1

{ 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...

[fily55]

This follows themes colors and is propably easiest way how to do it in Ext 4.1

{ 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.