PDA

View Full Version : Ext.Window.DD override to add a "shake" event to Ext.Window



Animal
18 Nov 2009, 3:56 AM
So you could for example, trap a Window's "shake" event, iterate through its manager (http://www.extjs.com/deploy/dev/docs/?class=Ext.Window&member=manager) and minimize all other Windows in its group:



Ext.override(Ext.Window.DD, {
startDrag : function(x, y){
this.lastSwitchTime = new Date().getTime();
this.switchCount = 0;
this.lastX = x;
this.lastY = y;
this.lastXInc = 0;
this.lastYInc = 0;
var w = this.win;
this.proxy = w.ghost();
if(w.constrain !== false){
var so = w.el.shadowOffset;
this.constrainTo(w.container, {right: so, left: so, bottom: so});
}else if(w.constrainHeader !== false){
var s = this.proxy.getSize();
this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])});
}
},

onDrag : function(e){
var x = e.getPageX(),
y = e.getPageY(),
xInc = x - this.lastX,
yInc = y - this.lastY,
now = new Date().getTime();

// If the X or Y dragging direction has been switched (Sign bit changed)...
if ((xInc && this.lastXInc && ((this.lastXInc & 0x80000000) != (xInc & 0x80000000))) ||
(yInc && this.lastYInc && ((this.lastYInc & 0x80000000) != (yInc & 0x80000000)))) {

// If the last direction switch was less than half a second ago...
if ((now - this.lastSwitchTime) < 500) {
this.switchCount++;

// If it's been done exactly 3 times, it's a shake gesture. Further switches are just part of the same gesture.
if (this.switchCount == 3) {
this.win.fireEvent("shake", this.win);
}
} else {
this.switchCount = 0;
}

// Record the time the dragging direction was switched
this.lastSwitchTime = now;
}
this.alignElWithMouse(this.proxy, x, y);
this.lastX = x;
this.lastY = y;
this.lastXInc = xInc;
this.lastYInc = yInc;
}
});

hendricd
18 Nov 2009, 4:12 AM
Very cool ! Shake it up! =D>

crp_spaeth
18 Nov 2009, 12:46 PM
nice idea and implementation (for sure)

Animal
19 Nov 2009, 2:31 AM
So now add the following code to examples/desktop/sample.js to get Windows 7 style minimize/restore on shake:



Ext.util.Observable.observeClass(Ext.Window);
Ext.Window.on({
shake: function(sw) {
var mgr = sw.manager,
fn = (mgr.lastFn === Ext.Window.prototype.minimize) ? Ext.Window.prototype.show : Ext.Window.prototype.minimize,
lw;
mgr.each(function(w) {
if (w !== sw) {
fn.apply(w);
lw = w;
}
});
lw.on('show', function(){sw.toFront();}, null, {single:true});
mgr.lastFn = fn;
}
});

Mad_Clog
19 Nov 2009, 10:49 AM
Sweet, thanks a lot and keep up the good work!