PDA

View Full Version : Show mask when mouseover and unmask on mouseout



emredagli
22 Sep 2013, 11:50 PM
Hi I try to implement, showing mask when mouseover an item and unmask on mouseout from item.

This is the code: (but not working)


var wizardLogoMaskEl;
Ext.get('wizard-logo').on("mouseover", function(e, t) {
wizardLogoMaskEl = Ext.get('wizard-logo').mask('Click to Replace');
wizardLogoMaskEl.on("mouseout", function(e, t) {
Ext.get('wizard-logo').unmask();
});
});


Thanks for your help.

slemmon
30 Sep 2013, 1:11 PM
See if this example helps you:



new Ext.Component({
renderTo: document.body,
html: '<div id="wizard-logo" style="width:200px;padding:50px;border:1px solid red;">LOGO</div>',
listeners: {
afterrender: function () {
var w = Ext.get('wizard-logo');


w.on({
mouseover: function () {
if (!w.isMasked()) {
var m = w.mask();
console.log('mouseover')
console.log(m);
m.on({
mouseout: function () {
w.unmask();
},
single: true
});
}
}
});
}
}
});