src/dd/StatusProxy.js

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