extjs buttons in toolbar appearance

Question

Hey, i have a small question really but something i cant seem to find out.

when i place a button in a extjs toolbar, it appears with a default apperance (like any windows toolbar options)

how do i make it look like a button in a form ??

Answer 1

See this post on the Sencha forum Toolbar Button Style. I too found this styling of a button as text quite unintuitive for users. With just a few lines of CSS added to your ExtJs css master file you can change this appearance globally for your application.

Answer 2

This is pretty close to this: ExtJS Button Style Toolbar

The answer I was looking for was found in that question:

Adding

ctCls: 'x-btn-over'

to the button's config makes it actually look like a button. This is kind of a hack because this is essentially styling the toolbar button to appear like it's being hovered over, but in my case I decided this was good enough.

edit: I haven't touched ExtJS since version 3, so it looks like this no longer works.

Answer 3

Try like this :

tbar: [
  { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' }
]

Answer 4

You have to wrap it in a panel, here is solution for Extjs 4.2.5

{
    xtype: 'panel',
    items: {
        xtype: 'button',
        text : 'My button'
    }
}

Answer 5

Here is my solution(it works for extJs 3.3.3):

For button add extra class, I named it as 'x-toolbar-grey-btn':

xtype: 'button',
id: 'processButton',
text: 'Process',
ctCls: 'x-toolbar-grey-btn'

Styles for extra class, in separate CSS file:

.x-toolbar-grey-btn .x-btn-tl{
    background-position: 0 0;
}
.x-toolbar-grey-btn .x-btn-tr{
    background-position: -3px 0;
}
.x-toolbar-grey-btn .x-btn-tc{
    background-position: 0 -6px;
}
.x-toolbar-grey-btn .x-btn-ml{
    background-position: 0 -24px;
}
.x-toolbar-grey-btn .x-btn-mr{
    background-position: -3px -24px;
}
.x-toolbar-grey-btn .x-btn-mc{
    background-position: 0 -1096px;
}
.x-toolbar-grey-btn .x-btn-bl{
    background-position: 0 -3px;
}
.x-toolbar-grey-btn .x-btn-br{
    background-position: -3px -3px;
}
.x-toolbar-grey-btn .x-btn-bc{
    background-position: 0 -15px;
}
.x-toolbar-grey-btn button{
    font-weight: bold;
}

Because Ext button images lay in the file '/ext-3.3.3/resources/images/default/button/btn.gif', I changed only background-position property. It looks like native button.