source/dd/StatusProxy.js

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