📄 window.js
字号:
var force = this.mask.dom.offsetHeight;
this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
}
this.doConstrain();
},
// private
doConstrain : function(){
if(this.constrain || this.constrainHeader){
var offsets;
if(this.constrain){
offsets = {
right:this.el.shadowOffset,
left:this.el.shadowOffset,
bottom:this.el.shadowOffset
};
}else {
var s = this.getSize();
offsets = {
right:-(s.width - 100),
bottom:-(s.height - 25)
};
}
var xy = this.el.getConstrainToXY(this.container, true, offsets);
if(xy){
this.setPosition(xy[0], xy[1]);
}
}
},
// private - used for dragging
ghost : function(cls){
var ghost = this.createGhost(cls);
var box = this.getBox(true);
ghost.setLeftTop(box.x, box.y);
ghost.setWidth(box.width);
this.el.hide();
this.activeGhost = ghost;
return ghost;
},
// private
unghost : function(show, matchPosition){
if(show !== false){
this.el.show();
this.focus();
if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug
this.cascade(this.setAutoScroll);
}
}
if(matchPosition !== false){
this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true));
}
this.activeGhost.hide();
this.activeGhost.remove();
delete this.activeGhost;
},
/**
* Placeholder method for minimizing the window. By default, this method simply fires the {@link #minimize} event
* since the behavior of minimizing a window is application-specific. To implement custom minimize behavior,
* either the minimize event can be handled or this method can be overridden.
*/
minimize : function(){
this.fireEvent('minimize', this);
},
/**
* Closes the window, removes it from the DOM and destroys the window object. The beforeclose event is fired
* before the close happens and will cancel the close action if it returns false.
*/
close : function(){
if(this.fireEvent("beforeclose", this) !== false){
this.hide(null, function(){
this.fireEvent('close', this);
this.destroy();
}, this);
}
},
/**
* Fits the window within its current container and automatically replaces the 'maximize' tool button with
* the 'restore' tool button.
*/
maximize : function(){
if(!this.maximized){
this.expand(false);
this.restoreSize = this.getSize();
this.restorePos = this.getPosition(true);
if (this.maximizable){
this.tools.maximize.hide();
this.tools.restore.show();
}
this.maximized = true;
this.el.disableShadow();
if(this.dd){
this.dd.lock();
}
if(this.collapsible){
this.tools.toggle.hide();
}
this.el.addClass('x-window-maximized');
this.container.addClass('x-window-maximized-ct');
this.setPosition(0, 0);
this.fitContainer();
this.fireEvent('maximize', this);
}
},
/**
* Restores a maximized window back to its original size and position prior to being maximized and also replaces
* the 'restore' tool button with the 'maximize' tool button.
*/
restore : function(){
if(this.maximized){
this.el.removeClass('x-window-maximized');
this.tools.restore.hide();
this.tools.maximize.show();
this.setPosition(this.restorePos[0], this.restorePos[1]);
this.setSize(this.restoreSize.width, this.restoreSize.height);
delete this.restorePos;
delete this.restoreSize;
this.maximized = false;
this.el.enableShadow(true);
if(this.dd){
this.dd.unlock();
}
if(this.collapsible){
this.tools.toggle.show();
}
this.container.removeClass('x-window-maximized-ct');
this.doConstrain();
this.fireEvent('restore', this);
}
},
/**
* A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized
* state of the window.
*/
toggleMaximize : function(){
this[this.maximized ? 'restore' : 'maximize']();
},
// private
fitContainer : function(){
var vs = this.container.getViewSize();
this.setSize(vs.width, vs.height);
},
// private
// z-index is managed by the WindowManager and may be overwritten at any time
setZIndex : function(index){
if(this.modal){
this.mask.setStyle("z-index", index);
}
this.el.setZIndex(++index);
index += 5;
if(this.resizer){
this.resizer.proxy.setStyle("z-index", ++index);
}
this.lastZIndex = index;
},
/**
* Aligns the window to the specified element
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details).
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @return {Ext.Window} this
*/
alignTo : function(element, position, offsets){
var xy = this.el.getAlignToXY(element, position, offsets);
this.setPagePosition(xy[0], xy[1]);
return this;
},
/**
* Anchors this window to another element and realigns it when the window is resized or scrolled.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details)
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
* is a number, it is used as the buffer delay (defaults to 50ms).
* @return {Ext.Window} this
*/
anchorTo : function(el, alignment, offsets, monitorScroll){
if(this.doAnchor){
Ext.EventManager.removeResizeListener(this.doAnchor, this);
Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
}
this.doAnchor = function(){
this.alignTo(el, alignment, offsets);
};
Ext.EventManager.onWindowResize(this.doAnchor, this);
var tm = typeof monitorScroll;
if(tm != 'undefined'){
Ext.EventManager.on(window, 'scroll', this.doAnchor, this,
{buffer: tm == 'number' ? monitorScroll : 50});
}
this.doAnchor();
return this;
},
/**
* Brings this window to the front of any other visible windows
* @return {Ext.Window} this
*/
toFront : function(e){
if(this.manager.bringToFront(this)){
if(!e || !e.getTarget().focus){
this.focus();
}
}
return this;
},
/**
* Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also
* fires the {@link #activate} or {@link #deactivate} event depending on which action occurred.
* @param {Boolean} active True to activate the window, false to deactivate it (defaults to false)
*/
setActive : function(active){
if(active){
if(!this.maximized){
this.el.enableShadow(true);
}
this.fireEvent('activate', this);
}else{
this.el.disableShadow();
this.fireEvent('deactivate', this);
}
},
/**
* Sends this window to the back of (lower z-index than) any other visible windows
* @return {Ext.Window} this
*/
toBack : function(){
this.manager.sendToBack(this);
return this;
},
/**
* Centers this window in the viewport
* @return {Ext.Window} this
*/
center : function(){
var xy = this.el.getAlignToXY(this.container, 'c-c');
this.setPagePosition(xy[0], xy[1]);
return this;
}
/**
* @cfg {Boolean} autoWidth @hide
**/
});
Ext.reg('window', Ext.Window);
// private - custom Window DD implementation
Ext.Window.DD = function(win){
this.win = win;
Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id);
this.setHandleElId(win.header.id);
this.scroll = false;
};
Ext.extend(Ext.Window.DD, Ext.dd.DD, {
moveOnly:true,
headerOffsets:[100, 25],
startDrag : function(){
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])});
}
},
b4Drag : Ext.emptyFn,
onDrag : function(e){
this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY());
},
endDrag : function(e){
this.win.unghost();
this.win.saveState();
}
});
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -