docs/source/StatusProxy.html

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