ExtJS Button Style Toolbar

Question

I was wondering if it is possible to put a button into a panel's toolbar but have it retain the look of a button as if it was just in a plain panel.

For example, i want the button to look like this:

Button Style

However, it looks like this:

Toolbar Button

Thanks so much!

EDIT

Code to create toolbar:

xtype: 'toolbar',
        items:
        [
            {
                xtype: 'button',
                text: 'Select bounding box on map',
                id: 'bbBoxButton',
                icon: 'img/cross_cursor.gif',
                listeners: {
                    click: function(){
                        polygonControl.activate();
                    }
                }   
            }
        ]

Code to create regular button:

{xtype: 'button',    id: 'bboxButton', text: 'Select bounding box on map', icon: 'img/cross_cursor.gif', listeners: {click: function(){polygonControl.activate()}}}

I believe I have to use the cls config for the button, but i cannot seem to find the appropriate css class.

please include the code which you have tried.. – dku.rajkumar Dec 12 '11 at 17:01 — dku.rajkumar, Dec 12 '11 at 17:01

score 6 · Answer 1 · answered Dec 13 '11 at 21:47

6

I had the exact same issue. To solve, I pass this into the button:

cls:'x-btn-default-small'

answered Dec 13 '11 at 21:47

sam

101
4

Once you rollover the button, won't the class be removed? – reergymerej Feb 26 '14 at 19:04
this does not work for IE8 – Oliver Watkins Aug 29 '14 at 08:43

score 2 · Answer 2 · answered Nov 21 '12 at 15:27

2

Adding this

ctCls: 'x-btn-over'

to button config solved the issue for me in Ext 2.2.1

answered Nov 21 '12 at 15:27

machinery

3,793
4
41
52

ExtJS Button Style Toolbar

2 Answers2

Linked