Help with Button and Custom Mask

[jeffbvox]

Can anyone point me in the direction of a sample or give an example of a button with a custom mask applied to it. I've tried several variations of creating a button with iconMask set to true and iconMaskCls set, but I can't seem to get it to work. Here's an example of one of my attempts:

Code:

var addSubCommentButton = new Ext.Button({
iconMaskClass: 'addComment',
iconMask: true,
height: 50,
width: 50,
listeners: {
click: {
element: 'el',
fn:SubCommentClicked,
scope: this
}
}
});

CSS:

.addComment {
-webkit-mask-image: url('images/buttons/CommentToFansComment48X44.png');
-webkit-mask-box-image: url('images/buttons/CommentToFansComment48X44.png');
-webkit-mask-size: 30px 30px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-origin: content;
}

Thanks for helping a sencha noobie out!

[dmassiani]

i use this :


var btnDel = new Ext.Button({
ui:"light",
iconCls:"delete_black2",
iconMask:true,
text:"annulation",
handler:function(e){console.log(e);}
})

[jeffbvox]

dmassiani, thanks for your reply. I tried a few more things after seeing your post and here's what I finally did to make it work:


var addSubCommentButton = new Ext.Button({
iconCls: 'addComment',
iconMask: true,
ui: 'plain',
height: 50,
width: 50,
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn:SubCommentClicked,
scope: this
}
}
});
with CSS:


.addComment {
-webkit-mask-image: url(../images/buttons/CommentToFansComment48X44.png);
/*-webkit-mask-box-image: url(../images/buttons/CommentToFansComment48X44.png);*/
-webkit-mask-size: 30px 30px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-origin: content;
}

I used iconCls instead of iconMaskCls to specify the masking image css, removed the -webkit-mask-box-image, and found out the css url function takes paths that are relative to the included css file, not to the containing html file (I store css in a subdirectory at the same level as the images directory, so I needed to do a ../ in front of images).

Thanks again. I hope this helps other folks that had the same problem I did.