Buttons with same width

[eugenparaschiv]

I want to create a simple panel that contains some buttons. The buttons have to:
- have some text
- have a small icon before or after the text
- have the same width (of course, otherwise it simply looks bad)

- ButtonBar is horizontal, so I cannot use it
- I cannot seem to find which of the buttons supports text, an image and custom width; if there isn't any that does, perhaps there should be
- and besides all that, the Button hierarchy in GXT is kinda inconsistent, as IconButton simply doesn't extend Button

[goeritz]

You can use the com.extjs.gxt.ui.client.widget.toolbar.TextToolItem as button.
In the constructor you define the text of your button. With the setIconStyle method you define a css class which contains i.e.


.x-grid-loading {
background-image: url(images/refresh.gif) !important;
}and with the setStyleAttribute method you can define the width of your button.

[eugenparaschiv]

Very nice. Thanks. It seems to indeed be the only thing that comes remotely close to what a flexible button should actually do. What I don't understand is why isn't this the functionality of one of the buttons, since it not only CAN be done, but IS done. Anyways, it works great and behaves as expected, but still lacks some flexibility. Here's why:

- the icon can only come before the text (that is no problem for me, but still)
- there can only be one icon (again, somewhat inflexible but not a real problem)
- now the problem: the icon and the text have no apparent way to be aligned inside the button; that means that neither the icons nor the text are aligned (I've attached a picture); Now, there probably is a way to set alignments on the DOM elements themselves, with CSS, but my CSS knowledge is limited at best. Can this be done in any way?
Thanks again.

[gslender]

The standard button can do this?...there is even an explorer example http://extjs.com/explorer/#basicbuttons /:)

Not sure about the alignment question, but my guess would be you are right, and just little hunting/searching on google would probably produce the answer :D

[eugenparaschiv]

I know the example, but the main problem with the standard button is that I cannot set it's size. The ToolTipItem was the only one that could do the three things I needed:
- variable size
- image
- text
But there is the alignament problem. I hope that indeed there is an easy way to set alignaments on both the image and the text of the button, so that there is no need to branch the code and go into the bolts and nails of the implementation.
But besides all of that, the button part of the API does lack maturity (not only because of the hierarchical inconsistency); it would be better there were a flexible button that would provide this simple functionality in the API, so that we don't have to work directly with CSS and the DOM. This is probably the direction the API is headed though.