PDA

View Full Version : iconMask not working in 0.95?



djkraz
15 Sep 2010, 2:18 PM
I have tested everything I can think of with no luck... I even stepped through the code and it is calling the routine to add the mask class to the icons. Is it broken or is there something else that has to be done differently to make it work the new way?


Ext.setup({
fullscreen: true,
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
items: [
{
iconMask: true,
iconCls: 'search'
}, {
iconMask: true,
ui: 'mask', // try this just for the heck of it
iconCls: 'refresh'
}
]
});

var panel = new Ext.Panel({
dockedItems: [toolbar],
fullscreen: true,
items: [{ html: 'test' }]
});

}

});

aconran
15 Sep 2010, 2:55 PM
iconMask is the correct configuration. ui: 'mask' has been removed.

If you look in the dom has the appropriate iconMaskCls been added to the image?

djkraz
15 Sep 2010, 5:45 PM
It looks as though they have though I noticed something very interesting... The "x-icon-mask" class is applied to the image which only declares iconMask:true however the container div still has the "x-button-normal" class... What's really interesting is that the button that also defines ui:'mask', has the "x-button-mask" class applied to it. See the html below for the output of the code I posted above. I assume they should both have the "x-button-mask" class applied but I guess it probably doesn't matter a whole lot at this point since neither one of those scenarios are working... Thanks for looking into this, I really appreciate it!


<div class="x-layout-box-inner x-layout-box" id="ext-gen1010" style="-webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-align: center; min-width: 1914px; height: 39px; ">
<div id="ext-comp-1005" class="x-button x-button-normal x-iconalign-left">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="search x-icon-mask" id="ext-gen1012">
</div>
<div id="ext-comp-1006" class="x-button x-button-mask x-iconalign-left">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="refresh x-icon-mask" id="ext-gen1014">
</div>
</div>

aconran
15 Sep 2010, 5:47 PM
The first is correct, the 2nd one has been removed.

Have you updated your CSS files in addition to the new JavaScript?

djkraz
15 Sep 2010, 5:49 PM
I did... I actually made a copy of my app, then deleted the entire sencha touch directory and extracted the 0.95 directory to it.

aconran
15 Sep 2010, 5:50 PM
Try ui: 'plain' in conjunction with iconMask: true.

djkraz
15 Sep 2010, 5:57 PM
That did the trick, thanks a million!! It makes sense now that I see it, a masked button doesn't necessarily mean you don't want the borders and such so now we have more options which is always a good thing once you understand it... Thanks again and as always, you guys kick a$$!

Abdhal
15 May 2011, 10:38 PM
I want to add custom icon to the toolbar. But i can't add an icon to i tried with background image property but i can't.