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