784 lines
26 KiB
JavaScript
784 lines
26 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
/**
|
|
* @class Ext.Resizable
|
|
* @extends Ext.util.Observable
|
|
* <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
|
|
* and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
|
|
* the textarea in a div and set 'resizeChild' to true (or to the id of the element), <b>or</b> set wrap:true in your config and
|
|
* the element will be wrapped for you automatically.</p>
|
|
* <p>Here is the list of valid resize handles:</p>
|
|
* <pre>
|
|
Value Description
|
|
------ -------------------
|
|
'n' north
|
|
's' south
|
|
'e' east
|
|
'w' west
|
|
'nw' northwest
|
|
'sw' southwest
|
|
'se' southeast
|
|
'ne' northeast
|
|
'all' all
|
|
</pre>
|
|
* <p>Here's an example showing the creation of a typical Resizable:</p>
|
|
* <pre><code>
|
|
var resizer = new Ext.Resizable('element-id', {
|
|
handles: 'all',
|
|
minWidth: 200,
|
|
minHeight: 100,
|
|
maxWidth: 500,
|
|
maxHeight: 400,
|
|
pinned: true
|
|
});
|
|
resizer.on('resize', myHandler);
|
|
</code></pre>
|
|
* <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
|
|
* resizer.east.setDisplayed(false);</p>
|
|
* @constructor
|
|
* Create a new resizable component
|
|
* @param {Mixed} el The id or element to resize
|
|
* @param {Object} config configuration options
|
|
*/
|
|
Ext.Resizable = Ext.extend(Ext.util.Observable, {
|
|
|
|
constructor: function(el, config){
|
|
this.el = Ext.get(el);
|
|
if(config && config.wrap){
|
|
config.resizeChild = this.el;
|
|
this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
|
|
this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
|
|
this.el.setStyle('overflow', 'hidden');
|
|
this.el.setPositioning(config.resizeChild.getPositioning());
|
|
config.resizeChild.clearPositioning();
|
|
if(!config.width || !config.height){
|
|
var csize = config.resizeChild.getSize();
|
|
this.el.setSize(csize.width, csize.height);
|
|
}
|
|
if(config.pinned && !config.adjustments){
|
|
config.adjustments = 'auto';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The proxy Element that is resized in place of the real Element during the resize operation.
|
|
* This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
|
|
* Read only.
|
|
* @type Ext.Element
|
|
* @property proxy
|
|
*/
|
|
this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
|
|
this.proxy.unselectable();
|
|
this.proxy.enableDisplayMode('block');
|
|
|
|
Ext.apply(this, config);
|
|
|
|
if(this.pinned){
|
|
this.disableTrackOver = true;
|
|
this.el.addClass('x-resizable-pinned');
|
|
}
|
|
// if the element isn't positioned, make it relative
|
|
var position = this.el.getStyle('position');
|
|
if(position != 'absolute' && position != 'fixed'){
|
|
this.el.setStyle('position', 'relative');
|
|
}
|
|
if(!this.handles){ // no handles passed, must be legacy style
|
|
this.handles = 's,e,se';
|
|
if(this.multiDirectional){
|
|
this.handles += ',n,w';
|
|
}
|
|
}
|
|
if(this.handles == 'all'){
|
|
this.handles = 'n s e w ne nw se sw';
|
|
}
|
|
var hs = this.handles.split(/\s*?[,;]\s*?| /);
|
|
var ps = Ext.Resizable.positions;
|
|
for(var i = 0, len = hs.length; i < len; i++){
|
|
if(hs[i] && ps[hs[i]]){
|
|
var pos = ps[hs[i]];
|
|
this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
|
|
}
|
|
}
|
|
// legacy
|
|
this.corner = this.southeast;
|
|
|
|
if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
|
|
this.updateBox = true;
|
|
}
|
|
|
|
this.activeHandle = null;
|
|
|
|
if(this.resizeChild){
|
|
if(typeof this.resizeChild == 'boolean'){
|
|
this.resizeChild = Ext.get(this.el.dom.firstChild, true);
|
|
}else{
|
|
this.resizeChild = Ext.get(this.resizeChild, true);
|
|
}
|
|
}
|
|
|
|
if(this.adjustments == 'auto'){
|
|
var rc = this.resizeChild;
|
|
var hw = this.west, he = this.east, hn = this.north, hs = this.south;
|
|
if(rc && (hw || hn)){
|
|
rc.position('relative');
|
|
rc.setLeft(hw ? hw.el.getWidth() : 0);
|
|
rc.setTop(hn ? hn.el.getHeight() : 0);
|
|
}
|
|
this.adjustments = [
|
|
(he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
|
|
(hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
|
|
];
|
|
}
|
|
|
|
if(this.draggable){
|
|
this.dd = this.dynamic ?
|
|
this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
|
|
this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
|
|
if(this.constrainTo){
|
|
this.dd.constrainTo(this.constrainTo);
|
|
}
|
|
}
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event beforeresize
|
|
* Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
|
|
* @param {Ext.Resizable} this
|
|
* @param {Ext.EventObject} e The mousedown event
|
|
*/
|
|
'beforeresize',
|
|
/**
|
|
* @event resize
|
|
* Fired after a resize.
|
|
* @param {Ext.Resizable} this
|
|
* @param {Number} width The new width
|
|
* @param {Number} height The new height
|
|
* @param {Ext.EventObject} e The mouseup event
|
|
*/
|
|
'resize'
|
|
);
|
|
|
|
if(this.width !== null && this.height !== null){
|
|
this.resizeTo(this.width, this.height);
|
|
}else{
|
|
this.updateChildSize();
|
|
}
|
|
if(Ext.isIE){
|
|
this.el.dom.style.zoom = 1;
|
|
}
|
|
Ext.Resizable.superclass.constructor.call(this);
|
|
},
|
|
|
|
/**
|
|
* @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
|
|
* resize operation's new size (defaults to <tt>[0, 0]</tt>)
|
|
*/
|
|
adjustments : [0, 0],
|
|
/**
|
|
* @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
|
|
*/
|
|
animate : false,
|
|
/**
|
|
* @cfg {Mixed} constrainTo Constrain the resize to a particular element
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
|
|
*/
|
|
disableTrackOver : false,
|
|
/**
|
|
* @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
|
|
*/
|
|
draggable: false,
|
|
/**
|
|
* @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
|
|
*/
|
|
duration : 0.35,
|
|
/**
|
|
* @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
|
|
*/
|
|
dynamic : false,
|
|
/**
|
|
* @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
|
|
*/
|
|
easing : 'easeOutStrong',
|
|
/**
|
|
* @cfg {Boolean} enabled False to disable resizing (defaults to true)
|
|
*/
|
|
enabled : true,
|
|
/**
|
|
* @property enabled Writable. False if resizing is disabled.
|
|
* @type Boolean
|
|
*/
|
|
/**
|
|
* @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
|
|
* Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
|
|
*/
|
|
handles : false,
|
|
/**
|
|
* @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
|
|
*/
|
|
multiDirectional : false,
|
|
/**
|
|
* @cfg {Number} height The height of the element in pixels (defaults to null)
|
|
*/
|
|
height : null,
|
|
/**
|
|
* @cfg {Number} width The width of the element in pixels (defaults to null)
|
|
*/
|
|
width : null,
|
|
/**
|
|
* @cfg {Number} heightIncrement The increment to snap the height resize in pixels
|
|
* (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
|
|
*/
|
|
heightIncrement : 0,
|
|
/**
|
|
* @cfg {Number} widthIncrement The increment to snap the width resize in pixels
|
|
* (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
|
|
*/
|
|
widthIncrement : 0,
|
|
/**
|
|
* @cfg {Number} minHeight The minimum height for the element (defaults to 5)
|
|
*/
|
|
minHeight : 5,
|
|
/**
|
|
* @cfg {Number} minWidth The minimum width for the element (defaults to 5)
|
|
*/
|
|
minWidth : 5,
|
|
/**
|
|
* @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
|
|
*/
|
|
maxHeight : 10000,
|
|
/**
|
|
* @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
|
|
*/
|
|
maxWidth : 10000,
|
|
/**
|
|
* @cfg {Number} minX The minimum x for the element (defaults to 0)
|
|
*/
|
|
minX: 0,
|
|
/**
|
|
* @cfg {Number} minY The minimum x for the element (defaults to 0)
|
|
*/
|
|
minY: 0,
|
|
/**
|
|
* @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
|
|
* user mouses over the resizable borders. This is only applied at config time. (defaults to false)
|
|
*/
|
|
pinned : false,
|
|
/**
|
|
* @cfg {Boolean} preserveRatio True to preserve the original ratio between height
|
|
* and width during resize (defaults to false)
|
|
*/
|
|
preserveRatio : false,
|
|
/**
|
|
* @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
|
|
*/
|
|
resizeChild : false,
|
|
/**
|
|
* @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
|
|
*/
|
|
transparent: false,
|
|
/**
|
|
* @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
|
|
* in favor of the handles config option (defaults to false)
|
|
*/
|
|
/**
|
|
* @cfg {String} handleCls A css class to add to each handle. Defaults to <tt>''</tt>.
|
|
*/
|
|
|
|
|
|
/**
|
|
* Perform a manual resize and fires the 'resize' event.
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
*/
|
|
resizeTo : function(width, height){
|
|
this.el.setSize(width, height);
|
|
this.updateChildSize();
|
|
this.fireEvent('resize', this, width, height, null);
|
|
},
|
|
|
|
// private
|
|
startSizing : function(e, handle){
|
|
this.fireEvent('beforeresize', this, e);
|
|
if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
|
|
|
|
if(!this.overlay){
|
|
this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
|
|
this.overlay.unselectable();
|
|
this.overlay.enableDisplayMode('block');
|
|
this.overlay.on({
|
|
scope: this,
|
|
mousemove: this.onMouseMove,
|
|
mouseup: this.onMouseUp
|
|
});
|
|
}
|
|
this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
|
|
|
|
this.resizing = true;
|
|
this.startBox = this.el.getBox();
|
|
this.startPoint = e.getXY();
|
|
this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
|
|
(this.startBox.y + this.startBox.height) - this.startPoint[1]];
|
|
|
|
this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
|
this.overlay.show();
|
|
|
|
if(this.constrainTo) {
|
|
var ct = Ext.get(this.constrainTo);
|
|
this.resizeRegion = ct.getRegion().adjust(
|
|
ct.getFrameWidth('t'),
|
|
ct.getFrameWidth('l'),
|
|
-ct.getFrameWidth('b'),
|
|
-ct.getFrameWidth('r')
|
|
);
|
|
}
|
|
|
|
this.proxy.setStyle('visibility', 'hidden'); // workaround display none
|
|
this.proxy.show();
|
|
this.proxy.setBox(this.startBox);
|
|
if(!this.dynamic){
|
|
this.proxy.setStyle('visibility', 'visible');
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseDown : function(handle, e){
|
|
if(this.enabled){
|
|
e.stopEvent();
|
|
this.activeHandle = handle;
|
|
this.startSizing(e, handle);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseUp : function(e){
|
|
this.activeHandle = null;
|
|
var size = this.resizeElement();
|
|
this.resizing = false;
|
|
this.handleOut();
|
|
this.overlay.hide();
|
|
this.proxy.hide();
|
|
this.fireEvent('resize', this, size.width, size.height, e);
|
|
},
|
|
|
|
// private
|
|
updateChildSize : function(){
|
|
if(this.resizeChild){
|
|
var el = this.el;
|
|
var child = this.resizeChild;
|
|
var adj = this.adjustments;
|
|
if(el.dom.offsetWidth){
|
|
var b = el.getSize(true);
|
|
child.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}
|
|
// Second call here for IE
|
|
// The first call enables instant resizing and
|
|
// the second call corrects scroll bars if they
|
|
// exist
|
|
if(Ext.isIE9m){
|
|
setTimeout(function(){
|
|
if(el.dom.offsetWidth){
|
|
var b = el.getSize(true);
|
|
child.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}
|
|
}, 10);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
snap : function(value, inc, min){
|
|
if(!inc || !value){
|
|
return value;
|
|
}
|
|
var newValue = value;
|
|
var m = value % inc;
|
|
if(m > 0){
|
|
if(m > (inc/2)){
|
|
newValue = value + (inc-m);
|
|
}else{
|
|
newValue = value - m;
|
|
}
|
|
}
|
|
return Math.max(min, newValue);
|
|
},
|
|
|
|
/**
|
|
* <p>Performs resizing of the associated Element. This method is called internally by this
|
|
* class, and should not be called by user code.</p>
|
|
* <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
|
|
* component such as a Panel, this method may be overridden by specifying an implementation
|
|
* as a config option to provide appropriate behaviour at the end of the resize operation on
|
|
* mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
|
|
* <p>The new area to be resized to is available by examining the state of the {@link #proxy}
|
|
* Element. Example:
|
|
<pre><code>
|
|
new Ext.Panel({
|
|
title: 'Resize me',
|
|
x: 100,
|
|
y: 100,
|
|
renderTo: Ext.getBody(),
|
|
floating: true,
|
|
frame: true,
|
|
width: 400,
|
|
height: 200,
|
|
listeners: {
|
|
render: function(p) {
|
|
new Ext.Resizable(p.getEl(), {
|
|
handles: 'all',
|
|
pinned: true,
|
|
transparent: true,
|
|
resizeElement: function() {
|
|
var box = this.proxy.getBox();
|
|
p.updateBox(box);
|
|
if (p.layout) {
|
|
p.doLayout();
|
|
}
|
|
return box;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}).show();
|
|
</code></pre>
|
|
*/
|
|
resizeElement : function(){
|
|
var box = this.proxy.getBox();
|
|
if(this.updateBox){
|
|
this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
|
|
}else{
|
|
this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
|
|
}
|
|
this.updateChildSize();
|
|
if(!this.dynamic){
|
|
this.proxy.hide();
|
|
}
|
|
if(this.draggable && this.constrainTo){
|
|
this.dd.resetConstraints();
|
|
this.dd.constrainTo(this.constrainTo);
|
|
}
|
|
return box;
|
|
},
|
|
|
|
// private
|
|
constrain : function(v, diff, m, mx){
|
|
if(v - diff < m){
|
|
diff = v - m;
|
|
}else if(v - diff > mx){
|
|
diff = v - mx;
|
|
}
|
|
return diff;
|
|
},
|
|
|
|
// private
|
|
onMouseMove : function(e){
|
|
if(this.enabled && this.activeHandle){
|
|
try{// try catch so if something goes wrong the user doesn't get hung
|
|
|
|
if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
|
|
return;
|
|
}
|
|
|
|
//var curXY = this.startPoint;
|
|
var curSize = this.curSize || this.startBox,
|
|
x = this.startBox.x, y = this.startBox.y,
|
|
ox = x,
|
|
oy = y,
|
|
w = curSize.width,
|
|
h = curSize.height,
|
|
ow = w,
|
|
oh = h,
|
|
mw = this.minWidth,
|
|
mh = this.minHeight,
|
|
mxw = this.maxWidth,
|
|
mxh = this.maxHeight,
|
|
wi = this.widthIncrement,
|
|
hi = this.heightIncrement,
|
|
eventXY = e.getXY(),
|
|
diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
|
|
diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
|
|
pos = this.activeHandle.position,
|
|
tw,
|
|
th;
|
|
|
|
switch(pos){
|
|
case 'east':
|
|
w += diffX;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
break;
|
|
case 'south':
|
|
h += diffY;
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
break;
|
|
case 'southeast':
|
|
w += diffX;
|
|
h += diffY;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
break;
|
|
case 'north':
|
|
diffY = this.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
break;
|
|
case 'west':
|
|
diffX = this.constrain(w, diffX, mw, mxw);
|
|
x += diffX;
|
|
w -= diffX;
|
|
break;
|
|
case 'northeast':
|
|
w += diffX;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
diffY = this.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
break;
|
|
case 'northwest':
|
|
diffX = this.constrain(w, diffX, mw, mxw);
|
|
diffY = this.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
x += diffX;
|
|
w -= diffX;
|
|
break;
|
|
case 'southwest':
|
|
diffX = this.constrain(w, diffX, mw, mxw);
|
|
h += diffY;
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
x += diffX;
|
|
w -= diffX;
|
|
break;
|
|
}
|
|
|
|
var sw = this.snap(w, wi, mw);
|
|
var sh = this.snap(h, hi, mh);
|
|
if(sw != w || sh != h){
|
|
switch(pos){
|
|
case 'northeast':
|
|
y -= sh - h;
|
|
break;
|
|
case 'north':
|
|
y -= sh - h;
|
|
break;
|
|
case 'southwest':
|
|
x -= sw - w;
|
|
break;
|
|
case 'west':
|
|
x -= sw - w;
|
|
break;
|
|
case 'northwest':
|
|
x -= sw - w;
|
|
y -= sh - h;
|
|
break;
|
|
}
|
|
w = sw;
|
|
h = sh;
|
|
}
|
|
|
|
if(this.preserveRatio){
|
|
switch(pos){
|
|
case 'southeast':
|
|
case 'east':
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
w = ow * (h/oh);
|
|
break;
|
|
case 'south':
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
break;
|
|
case 'northeast':
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
break;
|
|
case 'north':
|
|
tw = w;
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
x += (tw - w) / 2;
|
|
break;
|
|
case 'southwest':
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
tw = w;
|
|
w = ow * (h/oh);
|
|
x += tw - w;
|
|
break;
|
|
case 'west':
|
|
th = h;
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
y += (th - h) / 2;
|
|
tw = w;
|
|
w = ow * (h/oh);
|
|
x += tw - w;
|
|
break;
|
|
case 'northwest':
|
|
tw = w;
|
|
th = h;
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
w = ow * (h/oh);
|
|
y += th - h;
|
|
x += tw - w;
|
|
break;
|
|
|
|
}
|
|
}
|
|
this.proxy.setBounds(x, y, w, h);
|
|
if(this.dynamic){
|
|
this.resizeElement();
|
|
}
|
|
}catch(ex){}
|
|
}
|
|
},
|
|
|
|
// private
|
|
handleOver : function(){
|
|
if(this.enabled){
|
|
this.el.addClass('x-resizable-over');
|
|
}
|
|
},
|
|
|
|
// private
|
|
handleOut : function(){
|
|
if(!this.resizing){
|
|
this.el.removeClass('x-resizable-over');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the element this component is bound to.
|
|
* @return {Ext.Element}
|
|
*/
|
|
getEl : function(){
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* Returns the resizeChild element (or null).
|
|
* @return {Ext.Element}
|
|
*/
|
|
getResizeChild : function(){
|
|
return this.resizeChild;
|
|
},
|
|
|
|
/**
|
|
* Destroys this resizable. If the element was wrapped and
|
|
* removeEl is not true then the element remains.
|
|
* @param {Boolean} removeEl (optional) true to remove the element from the DOM
|
|
*/
|
|
destroy : function(removeEl){
|
|
Ext.destroy(this.dd, this.overlay, this.proxy);
|
|
this.overlay = null;
|
|
this.proxy = null;
|
|
|
|
var ps = Ext.Resizable.positions;
|
|
for(var k in ps){
|
|
if(typeof ps[k] != 'function' && this[ps[k]]){
|
|
this[ps[k]].destroy();
|
|
}
|
|
}
|
|
if(removeEl){
|
|
this.el.update('');
|
|
Ext.destroy(this.el);
|
|
this.el = null;
|
|
}
|
|
this.purgeListeners();
|
|
},
|
|
|
|
syncHandleHeight : function(){
|
|
var h = this.el.getHeight(true);
|
|
if(this.west){
|
|
this.west.el.setHeight(h);
|
|
}
|
|
if(this.east){
|
|
this.east.el.setHeight(h);
|
|
}
|
|
}
|
|
});
|
|
|
|
// private
|
|
// hash to map config positions to true positions
|
|
Ext.Resizable.positions = {
|
|
n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
|
|
};
|
|
|
|
Ext.Resizable.Handle = Ext.extend(Object, {
|
|
constructor : function(rz, pos, disableTrackOver, transparent, cls){
|
|
if(!this.tpl){
|
|
// only initialize the template if resizable is used
|
|
var tpl = Ext.DomHelper.createTemplate(
|
|
{tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
|
|
);
|
|
tpl.compile();
|
|
Ext.Resizable.Handle.prototype.tpl = tpl;
|
|
}
|
|
this.position = pos;
|
|
this.rz = rz;
|
|
this.el = this.tpl.append(rz.el.dom, [this.position], true);
|
|
this.el.unselectable();
|
|
if(transparent){
|
|
this.el.setOpacity(0);
|
|
}
|
|
if(!Ext.isEmpty(cls)){
|
|
this.el.addClass(cls);
|
|
}
|
|
this.el.on('mousedown', this.onMouseDown, this);
|
|
if(!disableTrackOver){
|
|
this.el.on({
|
|
scope: this,
|
|
mouseover: this.onMouseOver,
|
|
mouseout: this.onMouseOut
|
|
});
|
|
}
|
|
},
|
|
|
|
// private
|
|
afterResize : function(rz){
|
|
// do nothing
|
|
},
|
|
// private
|
|
onMouseDown : function(e){
|
|
this.rz.onMouseDown(this, e);
|
|
},
|
|
// private
|
|
onMouseOver : function(e){
|
|
this.rz.handleOver(this, e);
|
|
},
|
|
// private
|
|
onMouseOut : function(e){
|
|
this.rz.handleOut(this, e);
|
|
},
|
|
// private
|
|
destroy : function(){
|
|
Ext.destroy(this.el);
|
|
this.el = null;
|
|
}
|
|
});
|