Adding Custom Image to SegmentedButton Sencha Touch 2

Turns out one tiny hassel in Sencha Touch 2 is that the segmented buttons look terrible. Here’s how you add an image to your segmented button, customizing it to your website/app.

Step 1 : Get the Base 64 code of your image

If you’re not sure how to go about this part, read my earlier custom image series here :

Add Custom Image to Button Sencha Touch 1/2 

Step 2 : Make the Cls 

.x-tab .x-button-icon.female,
.x-button .x-button-icon.x-icon-mask.female {
-webkit-mask-image: url(‘data:image/png;base64,YourBase64ImageCodeHereforFemale’);
}.x-tab .x-button-icon.male,
.x-button .x-button-icon.x-icon-mask.male {
-webkit-mask-image: url(‘data:image/png;base64,YourBase64ImageCodeHereforMale’);

Step 2 : Insert into the JS code

{
     xtype : ‘segmentedbutton’,
     items : [
           {iconCls : ‘male’, iconMask: true, pressed:true, text:’Male’},
          {iconCls : ‘female’, iconMask: true, text:’Female’}]
}
 

Other Posts You May Like :

Add Custom Image to Button Sencha Touch 1/2 

Add Pressed Cls to SegmentedButton Sencha Touch 2

Add Disabled Cls to Form Elements Sencha Touch

Advertisements

Leave a message :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s