PDA

View Full Version : Button Icon Alignment not working, AND missing a "center" option?



kdtipa
23 Feb 2015, 1:55 PM
Hi all,

I tried searching for this before posting and couldn't find an answer, so I apologize if it's a repeat.

According to the docs, "button" xtype allows you to use an image on the button. I chose to use the "iconCls" property and "setIconCls" method to put an image on a button I intend to use as a toggle button. The property seems to work, but the method does not seem to allow me to switch between the two CSS classes. So I'm curious to know why that doesn't seem to work.

But beyond that, I found a property called "iconAlign" which gave me hope that I could center the icon because nothing I tried in the CSS seems to have an effect on where the image shows up on the button. And the documentation says there are four possible values for that property: "top", "right", "bottom", and "left". No centering option. I was further confused because the property doesn't seem to work no matter what value I put in.

So: How do I switch between icon classes for my toggle button? And how do I center the image in the button?

The button docs (http://docs-origin.sencha.com/extjs/4.2.0/#!/api/Ext.button.Button) I'm using.

joel.watson
28 Feb 2015, 4:00 PM
Hi-

To toggle the iconCls, add a listener for the "toggle" event, and in the handler set the iconCls using "setIconCls" based on the "pressed" argument.

To center the icon, you can do a bit of CSS to handle that. Please see the Fiddle below for an example.

Thanks!
Joel

ivd