Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / StatusProxy.html
index d616701..da78a51 100644 (file)
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.dd.StatusProxy"></div>/**\r
- * @class Ext.dd.StatusProxy\r
- * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the\r
- * default drag proxy used by all Ext.dd components.\r
- * @constructor\r
- * @param {Object} config\r
- */\r
-Ext.dd.StatusProxy = function(config){\r
-    Ext.apply(this, config);\r
-    this.id = this.id || Ext.id();\r
-    this.el = new Ext.Layer({\r
-        dh: {\r
-            id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [\r
-                {tag: "div", cls: "x-dd-drop-icon"},\r
-                {tag: "div", cls: "x-dd-drag-ghost"}\r
-            ]\r
-        }, \r
-        shadow: !config || config.shadow !== false\r
-    });\r
-    this.ghost = Ext.get(this.el.dom.childNodes[1]);\r
-    this.dropStatus = this.dropNotAllowed;\r
-};\r
-\r
-Ext.dd.StatusProxy.prototype = {\r
-    <div id="cfg-Ext.dd.StatusProxy-dropAllowed"></div>/**\r
-     * @cfg {String} dropAllowed\r
-     * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").\r
-     */\r
-    dropAllowed : "x-dd-drop-ok",\r
-    <div id="cfg-Ext.dd.StatusProxy-dropNotAllowed"></div>/**\r
-     * @cfg {String} dropNotAllowed\r
-     * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").\r
-     */\r
-    dropNotAllowed : "x-dd-drop-nodrop",\r
-\r
-    <div id="method-Ext.dd.StatusProxy-setStatus"></div>/**\r
-     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed\r
-     * over the current target element.\r
-     * @param {String} cssClass The css class for the new drop status indicator image\r
-     */\r
-    setStatus : function(cssClass){\r
-        cssClass = cssClass || this.dropNotAllowed;\r
-        if(this.dropStatus != cssClass){\r
-            this.el.replaceClass(this.dropStatus, cssClass);\r
-            this.dropStatus = cssClass;\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-reset"></div>/**\r
-     * Resets the status indicator to the default dropNotAllowed value\r
-     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it\r
-     */\r
-    reset : function(clearGhost){\r
-        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;\r
-        this.dropStatus = this.dropNotAllowed;\r
-        if(clearGhost){\r
-            this.ghost.update("");\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-update"></div>/**\r
-     * Updates the contents of the ghost element\r
-     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a\r
-     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).\r
-     */\r
-    update : function(html){\r
-        if(typeof html == "string"){\r
-            this.ghost.update(html);\r
-        }else{\r
-            this.ghost.update("");\r
-            html.style.margin = "0";\r
-            this.ghost.dom.appendChild(html);\r
-        }\r
-        var el = this.ghost.dom.firstChild; \r
-        if(el){\r
-            Ext.fly(el).setStyle('float', 'none');\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-getEl"></div>/**\r
-     * Returns the underlying proxy {@link Ext.Layer}\r
-     * @return {Ext.Layer} el\r
-    */\r
-    getEl : function(){\r
-        return this.el;\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-getGhost"></div>/**\r
-     * Returns the ghost element\r
-     * @return {Ext.Element} el\r
-     */\r
-    getGhost : function(){\r
-        return this.ghost;\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-hide"></div>/**\r
-     * Hides the proxy\r
-     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them\r
-     */\r
-    hide : function(clear){\r
-        this.el.hide();\r
-        if(clear){\r
-            this.reset(true);\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-stop"></div>/**\r
-     * Stops the repair animation if it's currently running\r
-     */\r
-    stop : function(){\r
-        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){\r
-            this.anim.stop();\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-show"></div>/**\r
-     * Displays this proxy\r
-     */\r
-    show : function(){\r
-        this.el.show();\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-sync"></div>/**\r
-     * Force the Layer to sync its shadow and shim positions to the element\r
-     */\r
-    sync : function(){\r
-        this.el.sync();\r
-    },\r
-\r
-    <div id="method-Ext.dd.StatusProxy-repair"></div>/**\r
-     * Causes the proxy to return to its position of origin via an animation.  Should be called after an\r
-     * invalid drop operation by the item being dragged.\r
-     * @param {Array} xy The XY position of the element ([x, y])\r
-     * @param {Function} callback The function to call after the repair is complete\r
-     * @param {Object} scope The scope in which to execute the callback\r
-     */\r
-    repair : function(xy, callback, scope){\r
-        this.callback = callback;\r
-        this.scope = scope;\r
-        if(xy && this.animRepair !== false){\r
-            this.el.addClass("x-dd-drag-repair");\r
-            this.el.hideUnders(true);\r
-            this.anim = this.el.shift({\r
-                duration: this.repairDuration || .5,\r
-                easing: 'easeOut',\r
-                xy: xy,\r
-                stopFx: true,\r
-                callback: this.afterRepair,\r
-                scope: this\r
-            });\r
-        }else{\r
-            this.afterRepair();\r
-        }\r
-    },\r
-\r
-    // private\r
-    afterRepair : function(){\r
-        this.hide(true);\r
-        if(typeof this.callback == "function"){\r
-            this.callback.call(this.scope || this);\r
-        }\r
-        this.callback = null;\r
-        this.scope = null;\r
-    }\r
-};</pre>    \r
-</body>\r
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-dd-StatusProxy-method-constructor'><span id='Ext-dd-StatusProxy'>/**
+</span></span> * @class Ext.dd.StatusProxy
+ * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
+ * default drag proxy used by all Ext.dd components.
+ * @constructor
+ * @param {Object} config
+ */
+Ext.define('Ext.dd.StatusProxy', {
+    animRepair: false,
+
+    constructor: function(config){
+        Ext.apply(this, config);
+        this.id = this.id || Ext.id();
+        this.proxy = Ext.createWidget('component', {
+            floating: true,
+            id: this.id,
+            html: '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'dd-drop-icon&quot;&gt;&lt;/div&gt;' +
+                  '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'dd-drag-ghost&quot;&gt;&lt;/div&gt;',
+            cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
+            shadow: !config || config.shadow !== false,
+            renderTo: document.body
+        });
+
+        this.el = this.proxy.el;
+        this.el.show();
+        this.el.setVisibilityMode(Ext.core.Element.VISIBILITY);
+        this.el.hide();
+
+        this.ghost = Ext.get(this.el.dom.childNodes[1]);
+        this.dropStatus = this.dropNotAllowed;
+    },
+<span id='Ext-dd-StatusProxy-cfg-dropAllowed'>    /**
+</span>     * @cfg {String} dropAllowed
+     * The CSS class to apply to the status element when drop is allowed (defaults to &quot;x-dd-drop-ok&quot;).
+     */
+    dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
+<span id='Ext-dd-StatusProxy-cfg-dropNotAllowed'>    /**
+</span>     * @cfg {String} dropNotAllowed
+     * The CSS class to apply to the status element when drop is not allowed (defaults to &quot;x-dd-drop-nodrop&quot;).
+     */
+    dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
+
+<span id='Ext-dd-StatusProxy-method-setStatus'>    /**
+</span>     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
+     * over the current target element.
+     * @param {String} cssClass The css class for the new drop status indicator image
+     */
+    setStatus : function(cssClass){
+        cssClass = cssClass || this.dropNotAllowed;
+        if(this.dropStatus != cssClass){
+            this.el.replaceCls(this.dropStatus, cssClass);
+            this.dropStatus = cssClass;
+        }
+    },
+
+<span id='Ext-dd-StatusProxy-method-reset'>    /**
+</span>     * Resets the status indicator to the default dropNotAllowed value
+     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
+     */
+    reset : function(clearGhost){
+        this.el.dom.className = Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed;
+        this.dropStatus = this.dropNotAllowed;
+        if(clearGhost){
+            this.ghost.update(&quot;&quot;);
+        }
+    },
+
+<span id='Ext-dd-StatusProxy-method-update'>    /**
+</span>     * Updates the contents of the ghost element
+     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
+     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
+     */
+    update : function(html){
+        if(typeof html == &quot;string&quot;){
+            this.ghost.update(html);
+        }else{
+            this.ghost.update(&quot;&quot;);
+            html.style.margin = &quot;0&quot;;
+            this.ghost.dom.appendChild(html);
+        }
+        var el = this.ghost.dom.firstChild; 
+        if(el){
+            Ext.fly(el).setStyle('float', 'none');
+        }
+    },
+
+<span id='Ext-dd-StatusProxy-method-getEl'>    /**
+</span>     * Returns the underlying proxy {@link Ext.Layer}
+     * @return {Ext.Layer} el
+    */
+    getEl : function(){
+        return this.el;
+    },
+
+<span id='Ext-dd-StatusProxy-method-getGhost'>    /**
+</span>     * Returns the ghost element
+     * @return {Ext.core.Element} el
+     */
+    getGhost : function(){
+        return this.ghost;
+    },
+
+<span id='Ext-dd-StatusProxy-method-hide'>    /**
+</span>     * Hides the proxy
+     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
+     */
+    hide : function(clear) {
+        this.proxy.hide();
+        if (clear) {
+            this.reset(true);
+        }
+    },
+
+<span id='Ext-dd-StatusProxy-method-stop'>    /**
+</span>     * Stops the repair animation if it's currently running
+     */
+    stop : function(){
+        if(this.anim &amp;&amp; this.anim.isAnimated &amp;&amp; this.anim.isAnimated()){
+            this.anim.stop();
+        }
+    },
+
+<span id='Ext-dd-StatusProxy-method-show'>    /**
+</span>     * Displays this proxy
+     */
+    show : function() {
+        this.proxy.show();
+        this.proxy.toFront();
+    },
+
+<span id='Ext-dd-StatusProxy-method-sync'>    /**
+</span>     * Force the Layer to sync its shadow and shim positions to the element
+     */
+    sync : function(){
+        this.proxy.el.sync();
+    },
+
+<span id='Ext-dd-StatusProxy-method-repair'>    /**
+</span>     * Causes the proxy to return to its position of origin via an animation.  Should be called after an
+     * invalid drop operation by the item being dragged.
+     * @param {Array} xy The XY position of the element ([x, y])
+     * @param {Function} callback The function to call after the repair is complete.
+     * @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.
+     */
+    repair : function(xy, callback, scope){
+        this.callback = callback;
+        this.scope = scope;
+        if (xy &amp;&amp; this.animRepair !== false) {
+            this.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
+            this.el.hideUnders(true);
+            this.anim = this.el.animate({
+                duration: this.repairDuration || 500,
+                easing: 'ease-out',
+                to: {
+                    x: xy[0],
+                    y: xy[1]
+                },
+                stopAnimation: true,
+                callback: this.afterRepair,
+                scope: this
+            });
+        } else {
+            this.afterRepair();
+        }
+    },
+
+    // private
+    afterRepair : function(){
+        this.hide(true);
+        if(typeof this.callback == &quot;function&quot;){
+            this.callback.call(this.scope || this);
+        }
+        this.callback = null;
+        this.scope = null;
+    },
+
+    destroy: function(){
+        Ext.destroy(this.ghost, this.proxy, this.el);
+    }
+});</pre>
+</body>
+</html>