把extjs4.2 desktop 窗口最大化动画效果移植到extjs4.1 中
[原创,转载请标明并留本文链接]
项目是extjs4.1做的,extjs4.2出来了,觉得有些新特性还不错,但移植项目发现css格式有些地方乱了,移植到4.2的原项目渲染效果也不理想,只能作罢,但extjs4.2有个效果吸引我,那就是extjs4.2 desktop 窗口最大化动画效果,4.1中没有这个效果,就研究参照4.2的代码改进4.1,最终实现了效果移植,代码如下:
修改extjs4.1的 ext-all-debug.js
找到
Ext.define('Ext.window.Window', {
extend: 'Ext.panel.Panel',
alternateClassName: 'Ext.Window',
requires: ['Ext.util.ComponentDragger', 'Ext.util.Region', 'Ext.EventManager'],
alias: 'widget.window', ...
这一段,里面有 maximize: function() 和 restore: function() 两个函数的定义 用如下代码覆盖该定义:
//===================================
maximize: function(animate) { //最大化窗口
var me = this;
if (!me.maximized) {
me.expand(false);
if (!me.hasSavedRestore) {
me.restoreSize = me.getSize();
me.restorePos = me.getPosition(true);
}
if (me.maximizable) {
me.tools.maximize.hide();
me.tools.restore.show();
}
me.maximized = true;
me.el.disableShadow();
if (me.dd) {
me.dd.disable();
}
if (me.resizer) {
me.resizer.disable();
}
if (me.collapseTool) {
me.collapseTool.hide();
}
me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
me.syncMonitorWindowResize();
me.maxfitContainer(animate = (animate || !!me.animateTarget) ? {
callback: function() {
me.fireEvent('maximize', me);
}
} : null);
if (!animate) {
me.fireEvent('maximize', me);
}
}
return me;
},
restore: function(animate) { //还原窗口
var me = this,
newBox = me.restoreSize,
tools = me.tools;
if (me.maximized) {
delete me.hasSavedRestore;
me.removeCls(Ext.baseCSSPrefix + 'window-maximized');
if (tools.restore) {
tools.restore.hide();
}
if (tools.maximize) {
tools.maximize.show();
}
if (me.collapseTool) {
me.collapseTool.show();
}
me.maximized = false;
newBox.x = me.restorePos[0];
newBox.y = me.restorePos[1];
me.restoresetBox(newBox, animate = (animate || !!me.animateTarget) ? {
callback: function() {
me.el.enableShadow(true);
me.doConstrain();
me.fireEvent('restore', me);
}
} : null);
delete me.restorePos;
delete me.restoreSize;
if (me.dd) {
me.dd.enable();
}
if (me.resizer) {
me.resizer.enable();
}
me.container.removeCls(Ext.baseCSSPrefix + 'window-maximized-ct');
me.syncMonitorWindowResize();
if (!animate) {
me.el.enableShadow(true);
me.fireEvent('restore', me);
}
}
return me;
},
//======================================
然后修改 Ext.define('Ext.util.Floating', 一段,找到 fitContainer: function()函数定义,在前面(不是该函数里面,是前面)加上如下代码,
//==================================
maxfitContainer: function(animate) {
var me = this,
parent = me.floatParent,
container = parent ? parent.getTargetEl() : me.container,
newBox = container.getViewSize(false),
newPosition = parent || (container.dom !== document.body) ?
[0, 0] :
container.getXY();
newBox.x = newPosition[0];
newBox.y = newPosition[1];
me.maxsetBox(newBox, animate);
};
maxsetBox: function(box, animate) {
var me = this,
el = me.el,
x = box.x,
y = box.y,
xy = [x, y],
w = box.width,
h = box.height,
constrainedPos = me.constrain && me.calculateConstrainedPosition(null, [x, y], false, [w, h]);
if (constrainedPos) {
x = constrainedPos[0];
y = constrainedPos[1];
}
if (!animate || !el.anim) {
me.setSize(w, h);
me.setXY([x, y]);
me.afterSetPosition(x, y);
} else {
me.animate(Ext.applyIf({
to: {
x: x,
y: y,
width: el.adjustWidth(w),
height: el.adjustHeight(h)
},
listeners: {
afteranimate: Ext.Function.bind(me.afterSetPosition, me, [x, y])
}
}, animate));
}
return me;
};
restoresetBox: function(box, animate) {
var me = this,
el = me.el,
x = box.x,
y = box.y,
xy = [x, y],
w = box.width,
h = box.height;
if (!animate || !el.anim) {
me.setSize(w, h);
me.setXY([x, y]);
me.afterSetPosition(x, y);
} else {
me.animate(Ext.applyIf({
to: {
x: x,
y: y,
width: el.adjustWidth(w),
height: el.adjustHeight(h)
},
listeners: {
afteranimate: Ext.Function.bind(me.afterSetPosition, me, [x, y])
}
}, animate));
}
return me;
};
calculateConstrainedPosition: function(constrainTo, proposedPosition, local, proposedSize) {
var me = this,
vector,
fp = me.floatParent,
parentNode = fp ? fp.getTargetEl() : null,
parentOffset,
borderPadding,
proposedConstrainPosition,
xy = false;
if (local && fp) {
parentOffset = parentNode.getXY();
borderPadding = parentNode.getBorderPadding();
parentOffset[0] += borderPadding.beforeX;
parentOffset[1] += borderPadding.beforeY;
if (proposedPosition) {
proposedConstrainPosition = [proposedPosition[0] + parentOffset[0], proposedPosition[1] + parentOffset[1]];
}
} else {
proposedConstrainPosition = proposedPosition;
}
constrainTo = constrainTo || me.constrainTo || parentNode || me.container || me.el.parent();
vector = (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo, proposedConstrainPosition, proposedSize);
if (vector) {
xy = proposedPosition || me.getPosition(local);
xy[0] += vector[0];
xy[1] += vector[1];
}
return xy;
};
//===========================
在项目中引用这个ext-all-debug.js 即有了窗口最大化动画效果.
演示: http://mail.gdfi.com.cn/zykdsk