docs/source/StatusProxy.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-dd-StatusProxy-method-constructor'><span id='Ext-dd-StatusProxy'>/**
  19 </span></span> * @class Ext.dd.StatusProxy
  20  * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
  21  * default drag proxy used by all Ext.dd components.
  22  * @constructor
  23  * @param {Object} config
  24  */
  25 Ext.define('Ext.dd.StatusProxy', {
  26     animRepair: false,
  27
  28     constructor: function(config){
  29         Ext.apply(this, config);
  30         this.id = this.id || Ext.id();
  31         this.proxy = Ext.createWidget('component', {
  32             floating: true,
  33             id: this.id,
  34             html: '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'dd-drop-icon&quot;&gt;&lt;/div&gt;' +
  35                   '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'dd-drag-ghost&quot;&gt;&lt;/div&gt;',
  36             cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
  37             shadow: !config || config.shadow !== false,
  38             renderTo: document.body
  39         });
  40
  41         this.el = this.proxy.el;
  42         this.el.show();
  43         this.el.setVisibilityMode(Ext.core.Element.VISIBILITY);
  44         this.el.hide();
  45
  46         this.ghost = Ext.get(this.el.dom.childNodes[1]);
  47         this.dropStatus = this.dropNotAllowed;
  48     },
  49 <span id='Ext-dd-StatusProxy-cfg-dropAllowed'>    /**
  50 </span>     * @cfg {String} dropAllowed
  51      * The CSS class to apply to the status element when drop is allowed (defaults to &quot;x-dd-drop-ok&quot;).
  52      */
  53     dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
  54 <span id='Ext-dd-StatusProxy-cfg-dropNotAllowed'>    /**
  55 </span>     * @cfg {String} dropNotAllowed
  56      * The CSS class to apply to the status element when drop is not allowed (defaults to &quot;x-dd-drop-nodrop&quot;).
  57      */
  58     dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
  59
  60 <span id='Ext-dd-StatusProxy-method-setStatus'>    /**
  61 </span>     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
  62      * over the current target element.
  63      * @param {String} cssClass The css class for the new drop status indicator image
  64      */
  65     setStatus : function(cssClass){
  66         cssClass = cssClass || this.dropNotAllowed;
  67         if(this.dropStatus != cssClass){
  68             this.el.replaceCls(this.dropStatus, cssClass);
  69             this.dropStatus = cssClass;
  70         }
  71     },
  72
  73 <span id='Ext-dd-StatusProxy-method-reset'>    /**
  74 </span>     * Resets the status indicator to the default dropNotAllowed value
  75      * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
  76      */
  77     reset : function(clearGhost){
  78         this.el.dom.className = Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed;
  79         this.dropStatus = this.dropNotAllowed;
  80         if(clearGhost){
  81             this.ghost.update(&quot;&quot;);
  82         }
  83     },
  84
  85 <span id='Ext-dd-StatusProxy-method-update'>    /**
  86 </span>     * Updates the contents of the ghost element
  87      * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
  88      * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
  89      */
  90     update : function(html){
  91         if(typeof html == &quot;string&quot;){
  92             this.ghost.update(html);
  93         }else{
  94             this.ghost.update(&quot;&quot;);
  95             html.style.margin = &quot;0&quot;;
  96             this.ghost.dom.appendChild(html);
  97         }
  98         var el = this.ghost.dom.firstChild;
  99         if(el){
 100             Ext.fly(el).setStyle('float', 'none');
 101         }
 102     },
 103
 104 <span id='Ext-dd-StatusProxy-method-getEl'>    /**
 105 </span>     * Returns the underlying proxy {@link Ext.Layer}
 106      * @return {Ext.Layer} el
 107     */
 108     getEl : function(){
 109         return this.el;
 110     },
 111
 112 <span id='Ext-dd-StatusProxy-method-getGhost'>    /**
 113 </span>     * Returns the ghost element
 114      * @return {Ext.core.Element} el
 115      */
 116     getGhost : function(){
 117         return this.ghost;
 118     },
 119
 120 <span id='Ext-dd-StatusProxy-method-hide'>    /**
 121 </span>     * Hides the proxy
 122      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
 123      */
 124     hide : function(clear) {
 125         this.proxy.hide();
 126         if (clear) {
 127             this.reset(true);
 128         }
 129     },
 130
 131 <span id='Ext-dd-StatusProxy-method-stop'>    /**
 132 </span>     * Stops the repair animation if it's currently running
 133      */
 134     stop : function(){
 135         if(this.anim &amp;&amp; this.anim.isAnimated &amp;&amp; this.anim.isAnimated()){
 136             this.anim.stop();
 137         }
 138     },
 139
 140 <span id='Ext-dd-StatusProxy-method-show'>    /**
 141 </span>     * Displays this proxy
 142      */
 143     show : function() {
 144         this.proxy.show();
 145         this.proxy.toFront();
 146     },
 147
 148 <span id='Ext-dd-StatusProxy-method-sync'>    /**
 149 </span>     * Force the Layer to sync its shadow and shim positions to the element
 150      */
 151     sync : function(){
 152         this.proxy.el.sync();
 153     },
 154
 155 <span id='Ext-dd-StatusProxy-method-repair'>    /**
 156 </span>     * Causes the proxy to return to its position of origin via an animation.  Should be called after an
 157      * invalid drop operation by the item being dragged.
 158      * @param {Array} xy The XY position of the element ([x, y])
 159      * @param {Function} callback The function to call after the repair is complete.
 160      * @param {Object} scope The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the callback function is executed. Defaults to the browser window.
 161      */
 162     repair : function(xy, callback, scope){
 163         this.callback = callback;
 164         this.scope = scope;
 165         if (xy &amp;&amp; this.animRepair !== false) {
 166             this.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
 167             this.el.hideUnders(true);
 168             this.anim = this.el.animate({
 169                 duration: this.repairDuration || 500,
 170                 easing: 'ease-out',
 171                 to: {
 172                     x: xy[0],
 173                     y: xy[1]
 174                 },
 175                 stopAnimation: true,
 176                 callback: this.afterRepair,
 177                 scope: this
 178             });
 179         } else {
 180             this.afterRepair();
 181         }
 182     },
 183
 184     // private
 185     afterRepair : function(){
 186         this.hide(true);
 187         if(typeof this.callback == &quot;function&quot;){
 188             this.callback.call(this.scope || this);
 189         }
 190         this.callback = null;
 191         this.scope = null;
 192     },
 193
 194     destroy: function(){
 195         Ext.destroy(this.ghost, this.proxy, this.el);
 196     }
 197 });</pre>
 198 </body>
 199 </html>