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