docs/source/StatusProxy.html

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