2 lines
No EOL
25 KiB
HTML
2 lines
No EOL
25 KiB
HTML
<html><head><title>Resizable.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Resizable.js</h1><pre class="highlighted"><code><i>/**
|
|
* @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 <b>this</b>. To overcome that, you can wrap
|
|
* the textarea <b>in</b> a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true <b>in</b> your config and
|
|
* the element will be wrapped <b>for</b> 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>
|
|
<b>var</b> resizer = <b>new</b> 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 <b>in</b> CSS, or through script:<br>
|
|
* resizer.east.setDisplayed(false);</p>
|
|
* @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
|
|
* @cfg {Array/String} adjustments String "auto" or an array [width, height] <b>with</b> values to be <b>added</b> to the
|
|
* resize operation's <b>new</b> size (defaults to [0, 0])
|
|
* @cfg {Number} minWidth The minimum width <b>for</b> the element (defaults to 5)
|
|
* @cfg {Number} minHeight The minimum height <b>for</b> the element (defaults to 5)
|
|
* @cfg {Number} maxWidth The maximum width <b>for</b> the element (defaults to 10000)
|
|
* @cfg {Number} maxHeight The maximum height <b>for</b> the element (defaults to 10000)
|
|
* @cfg {Boolean} enabled False to disable resizing (defaults to true)
|
|
* @cfg {Boolean} wrap True to wrap an element <b>with</b> a div <b>if</b> needed (required <b>for</b> textareas and images, defaults to false)
|
|
* @cfg {Number} width The width of the element <b>in</b> pixels (defaults to null)
|
|
* @cfg {Number} height The height of the element <b>in</b> pixels (defaults to null)
|
|
* @cfg {Boolean} animate True to animate the resize (not compatible <b>with</b> dynamic sizing, defaults to false)
|
|
* @cfg {Number} duration Animation duration <b>if</b> animate = true (defaults to .35)
|
|
* @cfg {Boolean} dynamic True to resize the element <b>while</b> dragging instead of using a proxy (defaults to false)
|
|
* @cfg {Boolean/String} handles String consisting of the resize handles to display (defaults to false)
|
|
* @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
|
|
* <b>in</b> favor of the handles config option (defaults to false)
|
|
* @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
|
|
* @cfg {String} easing Animation easing <b>if</b> animate = true (defaults to 'easingOutStrong')
|
|
* @cfg {Number} widthIncrement The increment to snap the width resize <b>in</b> pixels (dynamic must be true, defaults to 0)
|
|
* @cfg {Number} heightIncrement The increment to snap the height resize <b>in</b> pixels (dynamic must be true, defaults to 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)
|
|
* @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
|
|
* @cfg {Boolean} transparent True <b>for</b> transparent handles. This is only applied at config time. (defaults to false)
|
|
* @cfg {Number} minX The minimum allowed page X <b>for</b> the element (only used <b>for</b> west resizing, defaults to 0)
|
|
* @cfg {Number} minY The minimum allowed page Y <b>for</b> the element (only used <b>for</b> north resizing, defaults to 0)
|
|
* @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
|
|
* @constructor
|
|
* Create a <b>new</b> resizable component
|
|
* @param {String/HTMLElement/Ext.Element} el The id or element to resize
|
|
* @param {Object} config configuration options
|
|
*/</i>
|
|
Ext.Resizable = <b>function</b>(el, config){
|
|
<b>this</b>.el = Ext.get(el);
|
|
|
|
<b>if</b>(config && config.wrap){
|
|
config.resizeChild = <b>this</b>.el;
|
|
<b>this</b>.el = <b>this</b>.el.wrap(<b>typeof</b> config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
|
|
<b>this</b>.el.id = <b>this</b>.el.dom.id = config.resizeChild.id + "-rzwrap";
|
|
<b>this</b>.el.setStyle("overflow", "hidden");
|
|
<b>this</b>.el.setPositioning(config.resizeChild.getPositioning());
|
|
config.resizeChild.clearPositioning();
|
|
<b>if</b>(!config.width || !config.height){
|
|
<b>var</b> csize = config.resizeChild.getSize();
|
|
<b>this</b>.el.setSize(csize.width, csize.height);
|
|
}
|
|
<b>if</b>(config.pinned && !config.adjustments){
|
|
config.adjustments = "auto";
|
|
}
|
|
}
|
|
|
|
<b>this</b>.proxy = <b>this</b>.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: <b>this</b>.el.id + "-rzproxy"});
|
|
<b>this</b>.proxy.unselectable();
|
|
<b>this</b>.proxy.enableDisplayMode('block');
|
|
|
|
Ext.apply(<b>this</b>, config);
|
|
|
|
<b>if</b>(this.pinned){
|
|
<b>this</b>.disableTrackOver = true;
|
|
<b>this</b>.el.addClass("x-resizable-pinned");
|
|
}
|
|
// <b>if</b> the element isn't positioned, make it relative
|
|
<b>var</b> position = <b>this</b>.el.getStyle("position");
|
|
<b>if</b>(position != "absolute" && position != "fixed"){
|
|
<b>this</b>.el.setStyle("position", "relative");
|
|
}
|
|
<b>if</b>(!<b>this</b>.handles){ // no handles passed, must be legacy style
|
|
<b>this</b>.handles = 's,e,se';
|
|
<b>if</b>(this.multiDirectional){
|
|
<b>this</b>.handles += ',n,w';
|
|
}
|
|
}
|
|
<b>if</b>(this.handles == "all"){
|
|
<b>this</b>.handles = "n s e w ne nw se sw";
|
|
}
|
|
<b>var</b> hs = <b>this</b>.handles.split(/\s*?[,;]\s*?| /);
|
|
<b>var</b> ps = Ext.Resizable.positions;
|
|
<b>for</b>(var i = 0, len = hs.length; i < len; i++){
|
|
<b>if</b>(hs[i] && ps[hs[i]]){
|
|
<b>var</b> pos = ps[hs[i]];
|
|
<b>this</b>[pos] = <b>new</b> Ext.Resizable.Handle(<b>this</b>, pos, <b>this</b>.disableTrackOver, <b>this</b>.transparent);
|
|
}
|
|
}
|
|
// legacy
|
|
<b>this</b>.corner = <b>this</b>.southeast;
|
|
|
|
<b>if</b>(this.handles.indexOf("n") != -1 || <b>this</b>.handles.indexOf("w") != -1){
|
|
<b>this</b>.updateBox = true;
|
|
}
|
|
|
|
<b>this</b>.activeHandle = null;
|
|
|
|
<b>if</b>(this.resizeChild){
|
|
<b>if</b>(typeof <b>this</b>.resizeChild == "boolean"){
|
|
<b>this</b>.resizeChild = Ext.get(<b>this</b>.el.dom.firstChild, true);
|
|
}<b>else</b>{
|
|
<b>this</b>.resizeChild = Ext.get(<b>this</b>.resizeChild, true);
|
|
}
|
|
}
|
|
|
|
<b>if</b>(this.adjustments == "auto"){
|
|
<b>var</b> rc = <b>this</b>.resizeChild;
|
|
<b>var</b> hw = <b>this</b>.west, he = <b>this</b>.east, hn = <b>this</b>.north, hs = <b>this</b>.south;
|
|
<b>if</b>(rc && (hw || hn)){
|
|
rc.position("relative");
|
|
rc.setLeft(hw ? hw.el.getWidth() : 0);
|
|
rc.setTop(hn ? hn.el.getHeight() : 0);
|
|
}
|
|
<b>this</b>.adjustments = [
|
|
(he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
|
|
(hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
|
|
];
|
|
}
|
|
|
|
<b>if</b>(this.draggable){
|
|
<b>this</b>.dd = <b>this</b>.dynamic ?
|
|
<b>this</b>.el.initDD(null) : <b>this</b>.el.initDDProxy(null, {dragElId: <b>this</b>.proxy.id});
|
|
<b>this</b>.dd.setHandleElId(<b>this</b>.resizeChild ? <b>this</b>.resizeChild.id : <b>this</b>.el.id);
|
|
}
|
|
|
|
// public events
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event beforeresize
|
|
* Fired before resize is allowed. Set enabled to false to cancel resize.
|
|
* @param {Ext.Resizable} <b>this</b>
|
|
* @param {Ext.EventObject} e The mousedown event
|
|
*/</i>
|
|
"beforeresize" : true,
|
|
<i>/**
|
|
* @event resize
|
|
* Fired after a resize.
|
|
* @param {Ext.Resizable} <b>this</b>
|
|
* @param {Number} width The <b>new</b> width
|
|
* @param {Number} height The <b>new</b> height
|
|
* @param {Ext.EventObject} e The mouseup event
|
|
*/</i>
|
|
"resize" : true
|
|
});
|
|
|
|
<b>if</b>(this.width !== null && <b>this</b>.height !== null){
|
|
<b>this</b>.resizeTo(<b>this</b>.width, <b>this</b>.height);
|
|
}<b>else</b>{
|
|
<b>this</b>.updateChildSize();
|
|
}
|
|
<b>if</b>(Ext.isIE){
|
|
<b>this</b>.el.dom.style.zoom = 1;
|
|
}
|
|
Ext.Resizable.superclass.constructor.call(<b>this</b>);
|
|
};
|
|
|
|
Ext.extend(Ext.Resizable, Ext.util.Observable, {
|
|
resizeChild : false,
|
|
adjustments : [0, 0],
|
|
minWidth : 5,
|
|
minHeight : 5,
|
|
maxWidth : 10000,
|
|
maxHeight : 10000,
|
|
enabled : true,
|
|
animate : false,
|
|
duration : .35,
|
|
dynamic : false,
|
|
handles : false,
|
|
multiDirectional : false,
|
|
disableTrackOver : false,
|
|
easing : 'easeOutStrong',
|
|
widthIncrement : 0,
|
|
heightIncrement : 0,
|
|
pinned : false,
|
|
width : null,
|
|
height : null,
|
|
preserveRatio : false,
|
|
transparent: false,
|
|
minX: 0,
|
|
minY: 0,
|
|
draggable: false,
|
|
<i>/**
|
|
* Perform a manual resize
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
*/</i>
|
|
resizeTo : <b>function</b>(width, height){
|
|
<b>this</b>.el.setSize(width, height);
|
|
<b>this</b>.updateChildSize();
|
|
<b>this</b>.fireEvent("resize", <b>this</b>, width, height, null);
|
|
},
|
|
|
|
// private
|
|
startSizing : <b>function</b>(e, handle){
|
|
<b>this</b>.fireEvent("beforeresize", <b>this</b>, e);
|
|
<b>if</b>(this.enabled){ // 2nd enabled check <b>in</b> case disabled before beforeresize handler
|
|
|
|
<b>if</b>(!<b>this</b>.overlay){
|
|
<b>this</b>.overlay = <b>this</b>.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
|
|
<b>this</b>.overlay.unselectable();
|
|
<b>this</b>.overlay.enableDisplayMode("block");
|
|
<b>this</b>.overlay.on("mousemove", <b>this</b>.onMouseMove, <b>this</b>);
|
|
<b>this</b>.overlay.on("mouseup", <b>this</b>.onMouseUp, <b>this</b>);
|
|
}
|
|
<b>this</b>.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
|
|
|
|
<b>this</b>.resizing = true;
|
|
<b>this</b>.startBox = <b>this</b>.el.getBox();
|
|
<b>this</b>.startPoint = e.getXY();
|
|
<b>this</b>.offsets = [(<b>this</b>.startBox.x + <b>this</b>.startBox.width) - <b>this</b>.startPoint[0],
|
|
(<b>this</b>.startBox.y + <b>this</b>.startBox.height) - <b>this</b>.startPoint[1]];
|
|
|
|
<b>this</b>.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
|
<b>this</b>.overlay.show();
|
|
|
|
<b>this</b>.proxy.setStyle('visibility', 'hidden'); // workaround display none
|
|
<b>this</b>.proxy.show();
|
|
<b>this</b>.proxy.setBox(<b>this</b>.startBox);
|
|
<b>if</b>(!<b>this</b>.dynamic){
|
|
<b>this</b>.proxy.setStyle('visibility', 'visible');
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseDown : <b>function</b>(handle, e){
|
|
<b>if</b>(this.enabled){
|
|
e.stopEvent();
|
|
<b>this</b>.activeHandle = handle;
|
|
<b>this</b>.startSizing(e, handle);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseUp : <b>function</b>(e){
|
|
<b>var</b> size = <b>this</b>.resizeElement();
|
|
<b>this</b>.resizing = false;
|
|
<b>this</b>.handleOut();
|
|
<b>this</b>.overlay.hide();
|
|
<b>this</b>.fireEvent("resize", <b>this</b>, size.width, size.height, e);
|
|
},
|
|
|
|
// private
|
|
updateChildSize : <b>function</b>(){
|
|
<b>if</b>(this.resizeChild){
|
|
<b>var</b> el = <b>this</b>.el;
|
|
<b>var</b> child = <b>this</b>.resizeChild;
|
|
<b>var</b> adj = <b>this</b>.adjustments;
|
|
<b>if</b>(el.dom.offsetWidth){
|
|
<b>var</b> b = el.getSize(true);
|
|
child.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}
|
|
// Second call here <b>for</b> IE
|
|
// The first call enables instant resizing and
|
|
// the second call corrects scroll bars <b>if</b> they
|
|
// exist
|
|
<b>if</b>(Ext.isIE){
|
|
setTimeout(<b>function</b>(){
|
|
<b>if</b>(el.dom.offsetWidth){
|
|
<b>var</b> b = el.getSize(true);
|
|
child.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}
|
|
}, 10);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
snap : <b>function</b>(value, inc, min){
|
|
<b>if</b>(!inc || !value) <b>return</b> value;
|
|
<b>var</b> newValue = value;
|
|
<b>var</b> m = value % inc;
|
|
<b>if</b>(m > 0){
|
|
<b>if</b>(m > (inc/2)){
|
|
newValue = value + (inc-m);
|
|
}<b>else</b>{
|
|
newValue = value - m;
|
|
}
|
|
}
|
|
<b>return</b> Math.max(min, newValue);
|
|
},
|
|
|
|
// private
|
|
resizeElement : <b>function</b>(){
|
|
<b>var</b> box = <b>this</b>.proxy.getBox();
|
|
<b>if</b>(this.updateBox){
|
|
<b>this</b>.el.setBox(box, false, <b>this</b>.animate, <b>this</b>.duration, null, <b>this</b>.easing);
|
|
}<b>else</b>{
|
|
<b>this</b>.el.setSize(box.width, box.height, <b>this</b>.animate, <b>this</b>.duration, null, <b>this</b>.easing);
|
|
}
|
|
<b>this</b>.updateChildSize();
|
|
<b>this</b>.proxy.hide();
|
|
<b>return</b> box;
|
|
},
|
|
|
|
// private
|
|
constrain : <b>function</b>(v, diff, m, mx){
|
|
<b>if</b>(v - diff < m){
|
|
diff = v - m;
|
|
}<b>else</b> if(v - diff > mx){
|
|
diff = mx - v;
|
|
}
|
|
<b>return</b> diff;
|
|
},
|
|
|
|
// private
|
|
onMouseMove : <b>function</b>(e){
|
|
<b>if</b>(this.enabled){
|
|
try{// try catch so <b>if</b> something goes wrong the user doesn't get hung
|
|
|
|
//<b>var</b> curXY = <b>this</b>.startPoint;
|
|
<b>var</b> curSize = <b>this</b>.curSize || <b>this</b>.startBox;
|
|
<b>var</b> x = <b>this</b>.startBox.x, y = <b>this</b>.startBox.y;
|
|
<b>var</b> ox = x, oy = y;
|
|
<b>var</b> w = curSize.width, h = curSize.height;
|
|
<b>var</b> ow = w, oh = h;
|
|
<b>var</b> mw = <b>this</b>.minWidth, mh = <b>this</b>.minHeight;
|
|
<b>var</b> mxw = <b>this</b>.maxWidth, mxh = <b>this</b>.maxHeight;
|
|
<b>var</b> wi = <b>this</b>.widthIncrement;
|
|
<b>var</b> hi = <b>this</b>.heightIncrement;
|
|
|
|
<b>var</b> eventXY = e.getXY();
|
|
<b>var</b> diffX = -(<b>this</b>.startPoint[0] - Math.max(<b>this</b>.minX, eventXY[0]));
|
|
<b>var</b> diffY = -(<b>this</b>.startPoint[1] - Math.max(<b>this</b>.minY, eventXY[1]));
|
|
|
|
<b>var</b> pos = <b>this</b>.activeHandle.position;
|
|
|
|
<b>switch</b>(pos){
|
|
<b>case</b> "east":
|
|
w += diffX;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
<b>break</b>;
|
|
<b>case</b> "south":
|
|
h += diffY;
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
<b>break</b>;
|
|
<b>case</b> "southeast":
|
|
w += diffX;
|
|
h += diffY;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
<b>break</b>;
|
|
<b>case</b> "north":
|
|
diffY = <b>this</b>.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
<b>break</b>;
|
|
<b>case</b> "west":
|
|
diffX = <b>this</b>.constrain(w, diffX, mw, mxw);
|
|
x += diffX;
|
|
w -= diffX;
|
|
<b>break</b>;
|
|
<b>case</b> "northeast":
|
|
w += diffX;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
diffY = <b>this</b>.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
<b>break</b>;
|
|
<b>case</b> "northwest":
|
|
diffX = <b>this</b>.constrain(w, diffX, mw, mxw);
|
|
diffY = <b>this</b>.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
x += diffX;
|
|
w -= diffX;
|
|
<b>break</b>;
|
|
<b>case</b> "southwest":
|
|
diffX = <b>this</b>.constrain(w, diffX, mw, mxw);
|
|
h += diffY;
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
x += diffX;
|
|
w -= diffX;
|
|
<b>break</b>;
|
|
}
|
|
|
|
<b>var</b> sw = <b>this</b>.snap(w, wi, mw);
|
|
<b>var</b> sh = <b>this</b>.snap(h, hi, mh);
|
|
<b>if</b>(sw != w || sh != h){
|
|
<b>switch</b>(pos){
|
|
<b>case</b> "northeast":
|
|
y -= sh - h;
|
|
<b>break</b>;
|
|
<b>case</b> "north":
|
|
y -= sh - h;
|
|
<b>break</b>;
|
|
<b>case</b> "southwest":
|
|
x -= sw - w;
|
|
<b>break</b>;
|
|
<b>case</b> "west":
|
|
x -= sw - w;
|
|
<b>break</b>;
|
|
<b>case</b> "northwest":
|
|
x -= sw - w;
|
|
y -= sh - h;
|
|
<b>break</b>;
|
|
}
|
|
w = sw;
|
|
h = sh;
|
|
}
|
|
|
|
<b>if</b>(this.preserveRatio){
|
|
<b>switch</b>(pos){
|
|
<b>case</b> "southeast":
|
|
<b>case</b> "east":
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
w = ow * (h/oh);
|
|
<b>break</b>;
|
|
<b>case</b> "south":
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
<b>break</b>;
|
|
<b>case</b> "northeast":
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
<b>break</b>;
|
|
<b>case</b> "north":
|
|
<b>var</b> tw = w;
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
x += (tw - w) / 2;
|
|
<b>break</b>;
|
|
<b>case</b> "southwest":
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
<b>var</b> tw = w;
|
|
w = ow * (h/oh);
|
|
x += tw - w;
|
|
<b>break</b>;
|
|
<b>case</b> "west":
|
|
<b>var</b> th = h;
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
y += (th - h) / 2;
|
|
<b>var</b> tw = w;
|
|
w = ow * (h/oh);
|
|
x += tw - w;
|
|
<b>break</b>;
|
|
<b>case</b> "northwest":
|
|
<b>var</b> tw = w;
|
|
<b>var</b> th = h;
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
w = ow * (h/oh);
|
|
y += th - h;
|
|
x += tw - w;
|
|
<b>break</b>;
|
|
|
|
}
|
|
}
|
|
<b>this</b>.proxy.setBounds(x, y, w, h);
|
|
<b>if</b>(this.dynamic){
|
|
<b>this</b>.resizeElement();
|
|
}
|
|
}catch(e){}
|
|
}
|
|
},
|
|
|
|
// private
|
|
handleOver : <b>function</b>(){
|
|
<b>if</b>(this.enabled){
|
|
<b>this</b>.el.addClass("x-resizable-over");
|
|
}
|
|
},
|
|
|
|
// private
|
|
handleOut : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.resizing){
|
|
<b>this</b>.el.removeClass("x-resizable-over");
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the element <b>this</b> component is bound to.
|
|
* @<b>return</b> {Ext.Element}
|
|
*/</i>
|
|
getEl : <b>function</b>(){
|
|
<b>return</b> this.el;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the resizeChild element (or null).
|
|
* @<b>return</b> {Ext.Element}
|
|
*/</i>
|
|
getResizeChild : <b>function</b>(){
|
|
<b>return</b> this.resizeChild;
|
|
},
|
|
|
|
<i>/**
|
|
* Destroys <b>this</b> 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
|
|
*/</i>
|
|
destroy : <b>function</b>(removeEl){
|
|
<b>this</b>.proxy.remove();
|
|
<b>this</b>.overlay.removeAllListeners();
|
|
<b>this</b>.overlay.remove();
|
|
<b>var</b> ps = Ext.Resizable.positions;
|
|
<b>for</b>(var k <b>in</b> ps){
|
|
<b>if</b>(typeof ps[k] != "<b>function</b>" && <b>this</b>[ps[k]]){
|
|
<b>var</b> h = <b>this</b>[ps[k]];
|
|
h.el.removeAllListeners();
|
|
h.el.remove();
|
|
}
|
|
}
|
|
<b>if</b>(removeEl){
|
|
<b>this</b>.el.update("");
|
|
<b>this</b>.el.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 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"
|
|
};
|
|
|
|
// private
|
|
Ext.Resizable.Handle = <b>function</b>(rz, pos, disableTrackOver, transparent){
|
|
<b>if</b>(!<b>this</b>.tpl){
|
|
// only initialize the template <b>if</b> resizable is used
|
|
<b>var</b> tpl = Ext.DomHelper.createTemplate(
|
|
{tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
|
|
);
|
|
tpl.compile();
|
|
Ext.Resizable.Handle.prototype.tpl = tpl;
|
|
}
|
|
<b>this</b>.position = pos;
|
|
<b>this</b>.rz = rz;
|
|
<b>this</b>.el = <b>this</b>.tpl.append(rz.el.dom, [<b>this</b>.position], true);
|
|
<b>this</b>.el.unselectable();
|
|
<b>if</b>(transparent){
|
|
<b>this</b>.el.setOpacity(0);
|
|
}
|
|
<b>this</b>.el.on("mousedown", <b>this</b>.onMouseDown, <b>this</b>);
|
|
<b>if</b>(!disableTrackOver){
|
|
<b>this</b>.el.on("mouseover", <b>this</b>.onMouseOver, <b>this</b>);
|
|
<b>this</b>.el.on("mouseout", <b>this</b>.onMouseOut, <b>this</b>);
|
|
}
|
|
};
|
|
|
|
// private
|
|
Ext.Resizable.Handle.prototype = {
|
|
afterResize : <b>function</b>(rz){
|
|
// <b>do</b> nothing
|
|
},
|
|
// private
|
|
onMouseDown : <b>function</b>(e){
|
|
<b>this</b>.rz.onMouseDown(<b>this</b>, e);
|
|
},
|
|
// private
|
|
onMouseOver : <b>function</b>(e){
|
|
<b>this</b>.rz.handleOver(<b>this</b>, e);
|
|
},
|
|
// private
|
|
onMouseOut : <b>function</b>(e){
|
|
<b>this</b>.rz.handleOut(<b>this</b>, e);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |