Extjs toolbar buttons

Question

Hey, I have a little question, but something that I can’t find.

when I put the button on the extjs toolbar, it appears with a default value (like any Windows toolbar options)

How to make it look like a button in a form?

Answer 1

Try it like this:

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

Answer 2

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

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

Answer 3

See this post on the Sencha Style Toolbar forum . I also found this button style as text, completely unintuitive for users. With a few CSS lines added to the ExtJs css main file, you can change this look globally for your application.

Answer 4

It's pretty close: ExtJS style toolbar

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

Adding

 ctCls: 'x-btn-over' 

to button configuration makes it actually look like a button. This is a kind of hack, because it is essentially a stylization of the toolbar button so that it looks like it was hanging, but in my case, I decided that it was good enough.

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

Answer 5

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

To add an extra class, I called it "x-toolbar-gray-btn":

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

Styles for the extra class in a 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; } 

Since the images of the Ext button are in the file '/ext-3.3.3/resources/images/default/button/btn.gif', I changed the background-position property. It looks like a built-in button.