开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
Resizable.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：25k
源码类别：

JavaScript

开发平台：

JavaScript

Resizable.js：源码内容
  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Resizable
  3.  * @extends Ext.util.Observable
  4.  * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element 
  5.  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
  6.  * 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
  7.  * the element will be wrapped for you automatically.</p>
  8.  * <p>Here is the list of valid resize handles:</p>
  9.  * <pre>
  10. Value   Description
  11. ------  -------------------
  12.  'n'     north
  13.  's'     south
  14.  'e'     east
  15.  'w'     west
  16.  'nw'    northwest
  17.  'sw'    southwest
  18.  'se'    southeast
  19.  'ne'    northeast
  20.  'all'   all
  21. </pre>
  22.  * <p>Here's an example showing the creation of a typical Resizable:</p>
  23.  * <pre><code>
  24. var resizer = new Ext.Resizable('element-id', {
  25.     handles: 'all',
  26.     minWidth: 200,
  27.     minHeight: 100,
  28.     maxWidth: 500,
  29.     maxHeight: 400,
  30.     pinned: true
  31. });
  32. resizer.on('resize', myHandler);
  33. </code></pre>
  34.  * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
  35.  * resizer.east.setDisplayed(false);</p>
  36.  * @constructor
  37.  * Create a new resizable component
  38.  * @param {Mixed} el The id or element to resize
  39.  * @param {Object} config configuration options
  40.   */
  41. Ext.Resizable = function(el, config){
  42.     this.el = Ext.get(el);
  43.     
  44.     if(config && config.wrap){
  45.         config.resizeChild = this.el;
  46.         this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
  47.         this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
  48.         this.el.setStyle('overflow', 'hidden');
  49.         this.el.setPositioning(config.resizeChild.getPositioning());
  50.         config.resizeChild.clearPositioning();
  51.         if(!config.width || !config.height){
  52.             var csize = config.resizeChild.getSize();
  53.             this.el.setSize(csize.width, csize.height);
  54.         }
  55.         if(config.pinned && !config.adjustments){
  56.             config.adjustments = 'auto';
  57.         }
  58.     }
  60.     /**
  61.      * The proxy Element that is resized in place of the real Element during the resize operation.
  62.      * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
  63.      * Read only.
  64.      * @type Ext.Element.
  65.      * @property proxy
  66.      */
  67.     this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
  68.     this.proxy.unselectable();
  69.     this.proxy.enableDisplayMode('block');
  71.     Ext.apply(this, config);
  72.     
  73.     if(this.pinned){
  74.         this.disableTrackOver = true;
  75.         this.el.addClass('x-resizable-pinned');
  76.     }
  77.     // if the element isn't positioned, make it relative
  78.     var position = this.el.getStyle('position');
  79.     if(position != 'absolute' && position != 'fixed'){
  80.         this.el.setStyle('position', 'relative');
  81.     }
  82.     if(!this.handles){ // no handles passed, must be legacy style
  83.         this.handles = 's,e,se';
  84.         if(this.multiDirectional){
  85.             this.handles += ',n,w';
  86.         }
  87.     }
  88.     if(this.handles == 'all'){
  89.         this.handles = 'n s e w ne nw se sw';
  90.     }
  91.     var hs = this.handles.split(/s*?[,;]s*?| /);
  92.     var ps = Ext.Resizable.positions;
  93.     for(var i = 0, len = hs.length; i < len; i++){
  94.         if(hs[i] && ps[hs[i]]){
  95.             var pos = ps[hs[i]];
  96.             this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
  97.         }
  98.     }
  99.     // legacy
  100.     this.corner = this.southeast;
  101.     
  102.     if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
  103.         this.updateBox = true;
  104.     }   
  105.    
  106.     this.activeHandle = null;
  107.     
  108.     if(this.resizeChild){
  109.         if(typeof this.resizeChild == 'boolean'){
  110.             this.resizeChild = Ext.get(this.el.dom.firstChild, true);
  111.         }else{
  112.             this.resizeChild = Ext.get(this.resizeChild, true);
  113.         }
  114.     }
  115.     
  116.     if(this.adjustments == 'auto'){
  117.         var rc = this.resizeChild;
  118.         var hw = this.west, he = this.east, hn = this.north, hs = this.south;
  119.         if(rc && (hw || hn)){
  120.             rc.position('relative');
  121.             rc.setLeft(hw ? hw.el.getWidth() : 0);
  122.             rc.setTop(hn ? hn.el.getHeight() : 0);
  123.         }
  124.         this.adjustments = [
  125.             (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
  126.             (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 
  127.         ];
  128.     }
  129.     
  130.     if(this.draggable){
  131.         this.dd = this.dynamic ? 
  132.             this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
  133.         this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
  134.         if(this.constrainTo){
  135.             this.dd.constrainTo(this.constrainTo);
  136.         }
  137.     }
  138.     
  139.     this.addEvents(
  140.         /**
  141.          * @event beforeresize
  142.          * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
  143.          * @param {Ext.Resizable} this
  144.          * @param {Ext.EventObject} e The mousedown event
  145.          */
  146.         'beforeresize',
  147.         /**
  148.          * @event resize
  149.          * Fired after a resize.
  150.          * @param {Ext.Resizable} this
  151.          * @param {Number} width The new width
  152.          * @param {Number} height The new height
  153.          * @param {Ext.EventObject} e The mouseup event
  154.          */
  155.         'resize'
  156.     );
  157.     
  158.     if(this.width !== null && this.height !== null){
  159.         this.resizeTo(this.width, this.height);
  160.     }else{
  161.         this.updateChildSize();
  162.     }
  163.     if(Ext.isIE){
  164.         this.el.dom.style.zoom = 1;
  165.     }
  166.     Ext.Resizable.superclass.constructor.call(this);
  167. };
  169. Ext.extend(Ext.Resizable, Ext.util.Observable, {
  171.     /**
  172.      * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
  173.      * resize operation's new size (defaults to <tt>[0, 0]</tt>)
  174.      */
  175.     adjustments : [0, 0],
  176.     /**
  177.      * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
  178.      */
  179.     animate : false,
  180.     /**
  181.      * @cfg {Mixed} constrainTo Constrain the resize to a particular element
  182.      */
  183.     /**
  184.      * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
  185.      */
  186.     disableTrackOver : false,
  187.     /**
  188.      * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
  189.      */
  190.     draggable: false,
  191.     /**
  192.      * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
  193.      */
  194.     duration : 0.35,
  195.     /**
  196.      * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
  197.      */
  198.     dynamic : false,
  199.     /**
  200.      * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
  201.      */
  202.     easing : 'easeOutStrong',
  203.     /**
  204.      * @cfg {Boolean} enabled False to disable resizing (defaults to true)
  205.      */
  206.     enabled : true,
  207.     /**
  208.      * @property enabled Writable. False if resizing is disabled.
  209.      * @type Boolean 
  210.      */
  211.     /**
  212.      * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
  213.      * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
  214.      */
  215.     handles : false,
  216.     /**
  217.      * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  Deprecated style of adding multi-direction resize handles.
  218.      */
  219.     multiDirectional : false,
  220.     /**
  221.      * @cfg {Number} height The height of the element in pixels (defaults to null)
  222.      */
  223.     height : null,
  224.     /**
  225.      * @cfg {Number} width The width of the element in pixels (defaults to null)
  226.      */
  227.     width : null,
  228.     /**
  229.      * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
  230.      * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
  231.      */
  232.     heightIncrement : 0,
  233.     /**
  234.      * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
  235.      * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
  236.      */
  237.     widthIncrement : 0,
  238.     /**
  239.      * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
  240.      */
  241.     minHeight : 5,
  242.     /**
  243.      * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
  244.      */
  245.     minWidth : 5,
  246.     /**
  247.      * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
  248.      */
  249.     maxHeight : 10000,
  250.     /**
  251.      * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
  252.      */
  253.     maxWidth : 10000,
  254.     /**
  255.      * @cfg {Number} minX The minimum x for the element (defaults to 0)
  256.      */
  257.     minX: 0,
  258.     /**
  259.      * @cfg {Number} minY The minimum x for the element (defaults to 0)
  260.      */
  261.     minY: 0,
  262.     /**
  263.      * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
  264.      * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
  265.      */
  266.     pinned : false,
  267.     /**
  268.      * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
  269.      * and width during resize (defaults to false)
  270.      */
  271.     preserveRatio : false,
  272.     /**
  273.      * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) 
  274.      */ 
  275.     resizeChild : false,
  276.     /**
  277.      * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
  278.      */
  279.     transparent: false,
  280.     /**
  281.      * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
  282.      */
  283.     /**
  284.      * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
  285.      * in favor of the handles config option (defaults to false)
  286.      */
  288.     
  289.     /**
  290.      * Perform a manual resize and fires the 'resize' event.
  291.      * @param {Number} width
  292.      * @param {Number} height
  293.      */
  294.     resizeTo : function(width, height){
  295.         this.el.setSize(width, height);
  296.         this.updateChildSize();
  297.         this.fireEvent('resize', this, width, height, null);
  298.     },
  300.     // private
  301.     startSizing : function(e, handle){
  302.         this.fireEvent('beforeresize', this, e);
  303.         if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
  305.             if(!this.overlay){
  306.                 this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: '&#160;'}, Ext.getBody());
  307.                 this.overlay.unselectable();
  308.                 this.overlay.enableDisplayMode('block');
  309.                 this.overlay.on({
  310.                     scope: this,
  311.                     mousemove: this.onMouseMove,
  312.                     mouseup: this.onMouseUp
  313.                 });
  314.             }
  315.             this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
  317.             this.resizing = true;
  318.             this.startBox = this.el.getBox();
  319.             this.startPoint = e.getXY();
  320.             this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
  321.                             (this.startBox.y + this.startBox.height) - this.startPoint[1]];
  323.             this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
  324.             this.overlay.show();
  326.             if(this.constrainTo) {
  327.                 var ct = Ext.get(this.constrainTo);
  328.                 this.resizeRegion = ct.getRegion().adjust(
  329.                     ct.getFrameWidth('t'),
  330.                     ct.getFrameWidth('l'),
  331.                     -ct.getFrameWidth('b'),
  332.                     -ct.getFrameWidth('r')
  333.                 );
  334.             }
  336.             this.proxy.setStyle('visibility', 'hidden'); // workaround display none
  337.             this.proxy.show();
  338.             this.proxy.setBox(this.startBox);
  339.             if(!this.dynamic){
  340.                 this.proxy.setStyle('visibility', 'visible');
  341.             }
  342.         }
  343.     },
  345.     // private
  346.     onMouseDown : function(handle, e){
  347.         if(this.enabled){
  348.             e.stopEvent();
  349.             this.activeHandle = handle;
  350.             this.startSizing(e, handle);
  351.         }          
  352.     },
  354.     // private
  355.     onMouseUp : function(e){
  356.         this.activeHandle = null;
  357.         var size = this.resizeElement();
  358.         this.resizing = false;
  359.         this.handleOut();
  360.         this.overlay.hide();
  361.         this.proxy.hide();
  362.         this.fireEvent('resize', this, size.width, size.height, e);
  363.     },
  365.     // private
  366.     updateChildSize : function(){
  367.         if(this.resizeChild){
  368.             var el = this.el;
  369.             var child = this.resizeChild;
  370.             var adj = this.adjustments;
  371.             if(el.dom.offsetWidth){
  372.                 var b = el.getSize(true);
  373.                 child.setSize(b.width+adj[0], b.height+adj[1]);
  374.             }
  375.             // Second call here for IE
  376.             // The first call enables instant resizing and
  377.             // the second call corrects scroll bars if they
  378.             // exist
  379.             if(Ext.isIE){
  380.                 setTimeout(function(){
  381.                     if(el.dom.offsetWidth){
  382.                         var b = el.getSize(true);
  383.                         child.setSize(b.width+adj[0], b.height+adj[1]);
  384.                     }
  385.                 }, 10);
  386.             }
  387.         }
  388.     },
  390.     // private
  391.     snap : function(value, inc, min){
  392.         if(!inc || !value){
  393.             return value;
  394.         }
  395.         var newValue = value;
  396.         var m = value % inc;
  397.         if(m > 0){
  398.             if(m > (inc/2)){
  399.                 newValue = value + (inc-m);
  400.             }else{
  401.                 newValue = value - m;
  402.             }
  403.         }
  404.         return Math.max(min, newValue);
  405.     },
  407.     /**
  408.      * <p>Performs resizing of the associated Element. This method is called internally by this
  409.      * class, and should not be called by user code.</p>
  410.      * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
  411.      * component such as a Panel, this method may be overridden by specifying an implementation
  412.      * as a config option to provide appropriate behaviour at the end of the resize operation on
  413.      * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
  414.      * <p>The new area to be resized to is available by examining the state of the {@link #proxy}
  415.      * Element. Example:
  416. <pre><code>
  417. new Ext.Panel({
  418.     title: 'Resize me',
  419.     x: 100,
  420.     y: 100,
  421.     renderTo: Ext.getBody(),
  422.     floating: true,
  423.     frame: true,
  424.     width: 400,
  425.     height: 200,
  426.     listeners: {
  427.         render: function(p) {
  428.             new Ext.Resizable(p.getEl(), {
  429.                 handles: 'all',
  430.                 pinned: true,
  431.                 transparent: true,
  432.                 resizeElement: function() {
  433.                     var box = this.proxy.getBox();
  434.                     p.updateBox(box);
  435.                     if (p.layout) {
  436.                         p.doLayout();
  437.                     }
  438.                     return box;
  439.                 }
  440.            });
  441.        }
  442.     }
  443. }).show();
  444. </code></pre>
  445.      */
  446.     resizeElement : function(){
  447.         var box = this.proxy.getBox();
  448.         if(this.updateBox){
  449.             this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
  450.         }else{
  451.             this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
  452.         }
  453.         this.updateChildSize();
  454.         if(!this.dynamic){
  455.             this.proxy.hide();
  456.         }
  457.         if(this.draggable && this.constrainTo){
  458.             this.dd.resetConstraints();
  459.             this.dd.constrainTo(this.constrainTo);
  460.         }
  461.         return box;
  462.     },
  464.     // private
  465.     constrain : function(v, diff, m, mx){
  466.         if(v - diff < m){
  467.             diff = v - m;    
  468.         }else if(v - diff > mx){
  469.             diff = v - mx; 
  470.         }
  471.         return diff;                
  472.     },
  474.     // private
  475.     onMouseMove : function(e){
  476.         if(this.enabled && this.activeHandle){
  477.             try{// try catch so if something goes wrong the user doesn't get hung
  479.             if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
  480.                 return;
  481.             }
  483.             //var curXY = this.startPoint;
  484.             var curSize = this.curSize || this.startBox,
  485.                 x = this.startBox.x, y = this.startBox.y,
  486.                 ox = x, 
  487.                 oy = y,
  488.                 w = curSize.width, 
  489.                 h = curSize.height,
  490.                 ow = w, 
  491.                 oh = h,
  492.                 mw = this.minWidth, 
  493.                 mh = this.minHeight,
  494.                 mxw = this.maxWidth, 
  495.                 mxh = this.maxHeight,
  496.                 wi = this.widthIncrement,
  497.                 hi = this.heightIncrement,
  498.                 eventXY = e.getXY(),
  499.                 diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
  500.                 diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
  501.                 pos = this.activeHandle.position,
  502.                 tw,
  503.                 th;
  504.             
  505.             switch(pos){
  506.                 case 'east':
  507.                     w += diffX; 
  508.                     w = Math.min(Math.max(mw, w), mxw);
  509.                     break;
  510.                 case 'south':
  511.                     h += diffY;
  512.                     h = Math.min(Math.max(mh, h), mxh);
  513.                     break;
  514.                 case 'southeast':
  515.                     w += diffX; 
  516.                     h += diffY;
  517.                     w = Math.min(Math.max(mw, w), mxw);
  518.                     h = Math.min(Math.max(mh, h), mxh);
  519.                     break;
  520.                 case 'north':
  521.                     diffY = this.constrain(h, diffY, mh, mxh);
  522.                     y += diffY;
  523.                     h -= diffY;
  524.                     break;
  525.                 case 'west':
  526.                     diffX = this.constrain(w, diffX, mw, mxw);
  527.                     x += diffX;
  528.                     w -= diffX;
  529.                     break;
  530.                 case 'northeast':
  531.                     w += diffX; 
  532.                     w = Math.min(Math.max(mw, w), mxw);
  533.                     diffY = this.constrain(h, diffY, mh, mxh);
  534.                     y += diffY;
  535.                     h -= diffY;
  536.                     break;
  537.                 case 'northwest':
  538.                     diffX = this.constrain(w, diffX, mw, mxw);
  539.                     diffY = this.constrain(h, diffY, mh, mxh);
  540.                     y += diffY;
  541.                     h -= diffY;
  542.                     x += diffX;
  543.                     w -= diffX;
  544.                     break;
  545.                case 'southwest':
  546.                     diffX = this.constrain(w, diffX, mw, mxw);
  547.                     h += diffY;
  548.                     h = Math.min(Math.max(mh, h), mxh);
  549.                     x += diffX;
  550.                     w -= diffX;
  551.                     break;
  552.             }
  553.             
  554.             var sw = this.snap(w, wi, mw);
  555.             var sh = this.snap(h, hi, mh);
  556.             if(sw != w || sh != h){
  557.                 switch(pos){
  558.                     case 'northeast':
  559.                         y -= sh - h;
  560.                     break;
  561.                     case 'north':
  562.                         y -= sh - h;
  563.                         break;
  564.                     case 'southwest':
  565.                         x -= sw - w;
  566.                     break;
  567.                     case 'west':
  568.                         x -= sw - w;
  569.                         break;
  570.                     case 'northwest':
  571.                         x -= sw - w;
  572.                         y -= sh - h;
  573.                     break;
  574.                 }
  575.                 w = sw;
  576.                 h = sh;
  577.             }
  578.             
  579.             if(this.preserveRatio){
  580.                 switch(pos){
  581.                     case 'southeast':
  582.                     case 'east':
  583.                         h = oh * (w/ow);
  584.                         h = Math.min(Math.max(mh, h), mxh);
  585.                         w = ow * (h/oh);
  586.                        break;
  587.                     case 'south':
  588.                         w = ow * (h/oh);
  589.                         w = Math.min(Math.max(mw, w), mxw);
  590.                         h = oh * (w/ow);
  591.                         break;
  592.                     case 'northeast':
  593.                         w = ow * (h/oh);
  594.                         w = Math.min(Math.max(mw, w), mxw);
  595.                         h = oh * (w/ow);
  596.                     break;
  597.                     case 'north':
  598.                         tw = w;
  599.                         w = ow * (h/oh);
  600.                         w = Math.min(Math.max(mw, w), mxw);
  601.                         h = oh * (w/ow);
  602.                         x += (tw - w) / 2;
  603.                         break;
  604.                     case 'southwest':
  605.                         h = oh * (w/ow);
  606.                         h = Math.min(Math.max(mh, h), mxh);
  607.                         tw = w;
  608.                         w = ow * (h/oh);
  609.                         x += tw - w;
  610.                         break;
  611.                     case 'west':
  612.                         th = h;
  613.                         h = oh * (w/ow);
  614.                         h = Math.min(Math.max(mh, h), mxh);
  615.                         y += (th - h) / 2;
  616.                         tw = w;
  617.                         w = ow * (h/oh);
  618.                         x += tw - w;
  619.                        break;
  620.                     case 'northwest':
  621.                         tw = w;
  622.                         th = h;
  623.                         h = oh * (w/ow);
  624.                         h = Math.min(Math.max(mh, h), mxh);
  625.                         w = ow * (h/oh);
  626.                         y += th - h;
  627.                         x += tw - w;
  628.                         break;
  629.                         
  630.                 }
  631.             }
  632.             this.proxy.setBounds(x, y, w, h);
  633.             if(this.dynamic){
  634.                 this.resizeElement();
  635.             }
  636.             }catch(ex){}
  637.         }
  638.     },
  640.     // private
  641.     handleOver : function(){
  642.         if(this.enabled){
  643.             this.el.addClass('x-resizable-over');
  644.         }
  645.     },
  647.     // private
  648.     handleOut : function(){
  649.         if(!this.resizing){
  650.             this.el.removeClass('x-resizable-over');
  651.         }
  652.     },
  653.     
  654.     /**
  655.      * Returns the element this component is bound to.
  656.      * @return {Ext.Element}
  657.      */
  658.     getEl : function(){
  659.         return this.el;
  660.     },
  661.     
  662.     /**
  663.      * Returns the resizeChild element (or null).
  664.      * @return {Ext.Element}
  665.      */
  666.     getResizeChild : function(){
  667.         return this.resizeChild;
  668.     },
  669.     
  670.     /**
  671.      * Destroys this resizable. If the element was wrapped and 
  672.      * removeEl is not true then the element remains.
  673.      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
  674.      */
  675.     destroy : function(removeEl){
  676.         Ext.destroy(this.dd, this.overlay, this.proxy);
  677.         this.overlay = null;
  678.         this.proxy = null;
  679.         
  680.         var ps = Ext.Resizable.positions;
  681.         for(var k in ps){
  682.             if(typeof ps[k] != 'function' && this[ps[k]]){
  683.                 this[ps[k]].destroy();
  684.             }
  685.         }
  686.         if(removeEl){
  687.             this.el.update('');
  688.             Ext.destroy(this.el);
  689.             this.el = null;
  690.         }
  691.         this.purgeListeners();
  692.     },
  694.     syncHandleHeight : function(){
  695.         var h = this.el.getHeight(true);
  696.         if(this.west){
  697.             this.west.el.setHeight(h);
  698.         }
  699.         if(this.east){
  700.             this.east.el.setHeight(h);
  701.         }
  702.     }
  703. });
  705. // private
  706. // hash to map config positions to true positions
  707. Ext.Resizable.positions = {
  708.     n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
  709. };
  711. // private
  712. Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
  713.     if(!this.tpl){
  714.         // only initialize the template if resizable is used
  715.         var tpl = Ext.DomHelper.createTemplate(
  716.             {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
  717.         );
  718.         tpl.compile();
  719.         Ext.Resizable.Handle.prototype.tpl = tpl;
  720.     }
  721.     this.position = pos;
  722.     this.rz = rz;
  723.     this.el = this.tpl.append(rz.el.dom, [this.position], true);
  724.     this.el.unselectable();
  725.     if(transparent){
  726.         this.el.setOpacity(0);
  727.     }
  728.     this.el.on('mousedown', this.onMouseDown, this);
  729.     if(!disableTrackOver){
  730.         this.el.on({
  731.             scope: this,
  732.             mouseover: this.onMouseOver,
  733.             mouseout: this.onMouseOut
  734.         });
  735.     }
  736. };
  738. // private
  739. Ext.Resizable.Handle.prototype = {
  740.     // private
  741.     afterResize : function(rz){
  742.         // do nothing    
  743.     },
  744.     // private
  745.     onMouseDown : function(e){
  746.         this.rz.onMouseDown(this, e);
  747.     },
  748.     // private
  749.     onMouseOver : function(e){
  750.         this.rz.handleOver(this, e);
  751.     },
  752.     // private
  753.     onMouseOut : function(e){
  754.         this.rz.handleOut(this, e);
  755.     },
  756.     // private
  757.     destroy : function(){
  758.         Ext.destroy(this.el);
  759.         this.el = null;
  760.     }
  761. };