Alternate Way to Create Image Button in Sencha Touch

Hello,

Recently I was working on a sencha touch project where I need to use a nig round image in sencha touch button.  We all now that we can use images inside button using iconCls and iconMask property. That will put small icons inside your button along with button rounded corners and background colors. But in my case we don't need button background color or rounded border of button. We just need a round image with transparent background and user should be able to click on it. There are number of ways for doing it.

First we can use xtype : image and put image url to it. But sometimes tap event does not work over image. So this not an option. Other option is to use panel and put image as html inside and add tap evet to panel body. But that will be on complete panel body. So in case of round image if user tapped outside the image but inside a panel, tap event will be fired. So here is the third solution.

As we know that Ext.button extends the Ext.component so we can add html to component.  So we can add image as html as follow.

{

      xtype: 'button',

      html: '<img src="lib/images/myImage.png"/>'

}

After adding this image is added inside the button and but still have button background colors and rounded border. This you can remove by updating your sencha touch CSS. Find the following class in sencha touch CSS.

.x-button, .x-button.x-button-back:after, .x-button.x-button-forward:after, .x-toolbar .x-button, .x-toolbar .x-button.x-button-back:after, .x-toolbar .x-button.x-button-forward:after {
background-image: none;
background-color: #ccc;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(3%, #d9d9d9), color-stop(100%,#bfbfbf));
background-image: -webkit-linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);

background-image: -moz-linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);

background-image: -o-linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);

background-image: linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);
}

and replace it with following class. This will remove all background of button but still you will have rounded borders.

.x-button,.x-toolbar .x-button.x-button-back:after,.x-toolbar .x-button.x-button-forward:after{background-image:none;}

Now to remove borders, find following class.

.x-button, .x-toolbar .x-button {

border: 1px solid #999;

border-top-color: #a6a6a6;

background-color: #ccc;

color: #000;

}

and replace it with 

.x-button, .x-toolbar .x-button {

color: #000;

}

That's it and your button will only have image. And still user can tap on and it and have a feeling like button. 

Pelase note that updated sencha touch css is applicable to all the buttons in your application so if you have more than one button which does not have image, please don't use this trick. In my case I was having only one button in application so that's why I am using this trick.

Hope this helps you.