add
ui: 'default-toolbar'
in the button's config
add
ui: 'default-toolbar'
in the button's config
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
There's def something funky going on in 4.07 (haven't tested on 4.1). Although the API docs state that this:
is the same asCode:bbar:[{ xtype:'button', text:'Button 1'}]
it very obviously is not, check it out:Code:dockedItems:[{ xtype:'toolbar', dock:'bottom', items:[{ xtype:'button', text:'Button 1'}]}]
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
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
Ext 4.1.1 Standard (framed) buttons in toolbars:
Relevant code snippet is in Ext.toolbar.Toolbar#onBeforeAddCode:{ xtype: 'toolbar', ui: 'footer', // always show button frame items: [ { text: 'mybutton' } ] }
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: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); },
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; }
I am using Ext 4.1.1 and this works for me:
Config the button inside a toolbar as:
It looks like a normal button.Code:cls:'x-btn-default-small', border: 1, style: { borderColor: '#D1D1D1', borderStyle: 'solid' },
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"); } } }