docs/source/StatusProxy.html

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