Ext.plugin.ModalNotice

[chalu]

I needed a way to turn off the gray blury mask background for modal windows but still make the user not forget that they have a modal window on, if they try to interact with the rest of the page the window 'blinks' drawing attention to it's active state :



Ext.ns('Ext.plugin');
Ext.plugin.ModalNotice = Ext.extend(Ext.util.Observable, {
init: function(win){
this.window = win;
this.window.on('render', function(){
if(this.window.modal === true){
this.mask = this.window.container.select('div.ext-el-mask');
this.mask.applyStyles('background-color: transparent');
this.mask.on('click', this.onMaskClick, this);
}
}, this);
},

/**
* First we hide the window, then after some delay we show it.
* This gives the shake effect to the window. With the window reshown
* we now try to highlight it like it is blinking by hiding
* the shadow after a deley and then showing it again.
*/
onMaskClick: function(){
if(!this.shadowEl){
this.shadowEl = this.window.getEl().shadow.el;
}
this.window.hide();
(function() {
this.window.show();

(function(){
Ext.TaskMgr.start({
run: function(){
this.hide();
(function(){
this.show();
//this.frame('#808080');
}).defer(150, this);
},
repeat: 1,
interval: 1000,
scope: this.shadowEl
});
}).defer(150, this);

}).defer(150, this);

}
});



And usage can be thus :


var window = new Ext.Window({
title: 'Ext.plugin.ModalNotice Window',
width: 350,
height: 250,
labout: 'border',
shadow: 'frame',
shadowOffset: 4,
modal: true,
items: [{
region: 'west',
width: 50
}, {
region: 'center'
}],
plugins: new Ext.plugin.ModalNotice()
});
window.show();


Hope someone finds this useful. Cheers

[jay@moduscreate.com]

I can see that to be very useful! :) I would suggest a simple show/hide instead of fadeIn, fadeOut as they are more expensive - especially for a blink effect.

You could also frame the window as well after a blink.

---
an idea would also to 'shake' the window (move left - to right - x times).

[chalu]

I can see that to be very useful! :) I would suggest a simple show/hide instead of fadeIn, fadeOut as they are more expensive - especially for a blink effect.

You could also frame the window as well after a blink.

---
an idea would also to 'shake' the window (move left - to right - x times).

Sorry I don't get the 'frame the window' part. As for shaking the window, I think that was kind of very expensive for heavy windows, the 'shake' was very sluggish.

[jay@moduscreate.com]

Can you post the code for your shake? I was thinking of moveTo(Y + 5), wait, moveTo(Y - 5), etc.

Frame is simple:



var win;
win = new Ext.Window({
width : 100,
height : 100,
html : 'blah',
title : 'blah',
buttons : [
{
text : 'show/hide',
handler : function() {
win.hide();
(function() {
win.show();
win.el.frame('#FF0000');
}).defer(150);
}
}
]


});
win.show();

[jay@moduscreate.com]

This is neat too :

var win;
win = new Ext.Window({
width : 100,
height : 100,
html : 'blah',
title : 'blah',
listeners : {
show : function() {
win.el.frame('#0000FF');
}
}

});
win.show();

[chalu]

Update are available, we now use show / hide on the window and the shadow to achieve the desire 'modal notice'. See post #1

[jay@moduscreate.com]

(function(){
Ext.TaskMgr.start({
run: function(){
this.hide();
(function(){
this.show();
//this.frame('#808080');
}).createDelegate(this).defer(150);
},
repeat: 1,
interval: 1000,
scope: this.shadowEl
});
}).createDelegate(this).defer(150);


can be:


(function(){
Ext.TaskMgr.start({
run: function(){
this.hide();
(function(){
this.show();
//this.frame('#808080');
}).createDelegate(this).defer(150);
},
repeat: 1,
interval: 1000,
scope: this.shadowEl
});
}).defer(150, this);

[chalu]

Thanks for the tip, should have looked at the docs closely.

[wm003]

Nice, but does not work on IE6.

[chalu]

Actually did not test on that browser, will look at it. I really hate IE :-?:-?

[mxracer]

Actually did not test on that browser, will look at it. I really hate IE :-?:-?

Don't we all ;)

[jmcneese]

how about this?



win.setActive(false);

var wel = win.getEl();
var pos = wel.getXY();

wel.sequenceFx().shift({
duration: 0.1,
x: pos[0] - 20
}).shift({
duration: 0.1,
x: pos[0] + 20
}).shift({
duration: 0.1,
x: pos[0] - 10
}).shift({
duration: 0.1,
x: pos[0] + 10
}).shift({
duration: 0.1,
x: pos[0] - 5
}).shift({
duration: 0.1,
x: pos[0] + 5
}).shift({
duration: 0.1,
x: pos[0]
});