View Full Version : Button control does not position the icon correctly after removing and setting Text

8 Sep 2011, 8:52 AM
Sencha Touch version tested:


only default ext-all.css
Platform tested against:

iOS 3.x
iOS 4
Windows Chrome 13.0.782.220 m
Windows Safari 5.1

Icons added to the Button are not aligning in the same place.
When we remove the text from the button and add the text again, the Icons where placed exactly opposite side.
Test Case:
let's say we have a button with icon at the left side and text at right side, when we remove the text by calling Button.setText(null), button will be displayed only with Icon at the center. Later if we add the text back to button using same setText() function, the icon is displaying in the right side instead of left side of text.

Steps to reproduce the problem:

Create a button with Icon and Text.
Set the icon align as left.
Remove the text on some event ( like change in orientation from Landscape to Portrait)
Make sure the button is displayed only with icon at center of the button
Set the Text back when the orientation changes from Portrait to Landscape
See that the text is added to left and the icon is displaying at right side instead of left side
The result that was expected:

Icon should be positioned where it was defined
The result that occurs instead:

Icon added exactly opposite side where it was defined first
Screenshot or Video:

First image shows initial display. See icon is displayed at left
Second image shows after removing the text
Third image shows after displaying the text again. See icon is displayed at right.

13 Sep 2011, 9:41 PM

Can I know how do you got the icon for forward and rewind ?
Is it in build icon or custom icon?
What is the iconCls ,if it is inbuild icon?

14 Sep 2011, 1:45 PM
there is no direct iconCls for these icons, but it does come along with Sencha Touch, you could find them in SenchaTouch\Resources\themes\images\default\pictos folder, the file names are "forward" and "rewind".