extjs4 desktop 实现仿win7效果的桌面窗口预览效果

先上图：



这个预览效果是不是很炫，代码如下：
在原extjs desktop自带的demo的基础上，拓展TaskBar.js代码：

Ext.namespace("LinBsoft._PreviewBox");

LinBsoft._PreviewBox = Ext.extend(Ext.Component,
{
inited: false,
defaultZIndex: 21000,
defaultLeft: 0,
defaultBottom: 40,
hideBottom: 30,
boxWidth: 250,
cloneWinMaxWidth: 220,
cloneWinMaxHeight: 116,
hideDelay: 500,
showDelay: 500,
constructor: function () {
LinBsoft._PreviewBox.superclass.constructor.call(this, { renderTo: document.body, cls: "lbs-previewbox", hidden: true });
this.inited = false;
this.hoverCount = 0
},

createBoxElements: function () {
var a = this.getEl(), b;
this.boxMl = a.createChild({ tag: "div", cls: "lbs-previewbox-ml" });
this.boxMr = this.boxMl.createChild({ tag: "div", cls: "lbs-previewbox-mr" });
this.boxMc = this.boxMr.createChild({ tag: "div", cls: "lbs-previewbox-mc" });
this.arrow = a.createChild({ tag: "div", cls: "lbs-previewbox-arrow" });
b = this.boxMc;
this.desc = b.createChild({ tag: "div", cls: "lbs-previewbox-desc" });
b.createChild({ tag: "hr" });
this.win = b.createChild({ tag: "div", cls: "lbs-previewbox-win" });
this.inited = true;
this.mon(mydsk.desktop.taskbar.getEl(), "click", this.onTaskbarClick, this);
this.mon(mydsk.desktop.taskbar.getEl(), "contextmenu", this.onTaskbarClick, this)
},
onTaskbarClick: function () { this.hideBox(true) },
showBox: function (a) {
this.needShowBox = true;
this.hoverCount += 1;
Ext.defer(function () { this.doShowBox(a, this.hoverCount) }, 300, this);
},

doShowBox: function (f, e) {
var d, h, b, a, c, g;
if (!f || !f.win || !f.centerX) { alert("required parameters not exist"); return }
if (this.hoverCount !== e) { return }
if (!this.needShowBox) { return }
if (!this.inited) { this.createBoxElements() }
c = Ext.isNumber(f.centerX) ? f.centerX : this.defaultLeft;
d = f.win;
h = d.getEl();
g = d.title || "";
this.desc.update(g || "");
if (this.clonedEl) { this.clonedEl.remove() }
this.clonedEl = this.getClonedEl(d);
this.clonedEl.show();
this.win.appendChild(this.clonedEl);
b = this.getEl();
if (this.isVisible()) {
b.setBottom(this.defaultBottom);
this.show();
b.shift({ left: c - (this.boxWidth / 2), opacity: 1, easing: 'easeIn', duration: 500 })
} else {
b.setLeft(c - (this.boxWidth / 2));
b.setBottom(this.hideBottom);
b.setOpacity(0.2);
this.show();
b.shift({ bottom: this.defaultBottom, opacity: 1, easing: 'easeIn', duration: 500 })
}
this.hoverCount = 0
},

hideBox: function (a) {
this.needShowBox = false;
Ext.defer((function () { if (this.needShowBox) { return } this.doHideBox(a) }), (a === true) ? 0 : 300, this)
},

doHideBox: function (b) {
var c;
var a = function () {
if (this.needShowBox) { return }
this.hide();
};
if (this.clonedEl) { this.clonedEl.remove() }
this.hoverCount = 0;
if (b === true) { a.call(this); return }
c = this.getEl();
c.shift({ bottom: this.hideBottom, opacity: 0, duration: 500, easing: 'easeIn', scope: this, callback: a })
},

getClonedEl: function (e) {
var c = 0;
var h = 0;
var g = e.getEl();
var b = g.dom.cloneNode(true);
b.className = b.className.replace('x-hide-offsets', '');
b.removeAttribute("id");
var f = Ext.get(b);
f._previewMask = f.createChild({ tag: "div", cls: "lbs-previewbox-win-mask" });
var a = g.getSize();
var d = this.cloneWinMaxWidth / a.width;
c = (this.cloneWinMaxHeight - a.height * d) / 2;
if ((a.height * d) > this.cloneWinMaxHeight) { d = this.cloneWinMaxHeight / a.height; c = 0; h = (this.cloneWinMaxWidth - a.width * d) / 2 }
d = Math.min(d, 1);
f.setStyle("transform-origin", "0% 0%");
f.setStyle("-webkit-transform-origin", "0% 0%");
f.setStyle("-moz-transform-origin", "0% 0%");
f.setStyle("-o-transform-origin", "0% 0%");
f.setStyle("msTransform-origin", "0% 0%");
f.setStyle("-webkit-transform", String.format("scale({0})", d));
f.setStyle("-moz-transform", String.format("scale({0})", d));
f.setStyle("-o-transform", String.format("scale({0})", d));
f.setStyle("transform", String.format("scale({0})", d));
f.setStyle("msTransform", String.format("scale({0},{1})", d, d));
f.setLeftTop(h, c);
return f
}
});

然后，在 Ext.define('Ext.ux.desktop.TaskBar', { 的  initComponent: function () { 里new一个对象
LinBsoft.PreviewBox = new LinBsoft._PreviewBox();
在鼠标经过进入和移出任务栏快捷图标时显示和隐藏预览小窗： onMouseOverHandler: function (d) {
var posx = 173 + d.x + (d.width / 2);
var mx = window.event.x;
if (Ext.isIE) { posx = mx + 173 }
else if (Math.abs(posx - mx) > 73) { posx = mx }
var b = { win: d.win, centerX: posx };
LinBsoft.PreviewBox.showBox(b)
},
onMouseOutHandler: function (a) {
LinBsoft.PreviewBox.hideBox()
},
其中 b变量计算显示小窗的位置，因如ie和谷歌浏览器等的位置计算有差别，作了适应计算。因为win7 是操作系统，可以直接操作复制屏幕显示内存，而js在浏览器中运行，不可能做这个操作，因此，这只是通过复制dom和css的缩小效果实现。