3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.dd.StatusProxy
17 * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the
18 * default drag proxy used by all Ext.dd components.
20 Ext.define('Ext.dd.StatusProxy', {
24 * Creates new StatusProxy.
25 * @param {Object} config (optional) Config object.
27 constructor: function(config){
28 Ext.apply(this, config);
29 this.id = this.id || Ext.id();
30 this.proxy = Ext.createWidget('component', {
34 html: '<div class="' + Ext.baseCSSPrefix + 'dd-drop-icon"></div>' +
35 '<div class="' + Ext.baseCSSPrefix + 'dd-drag-ghost"></div>',
36 cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
37 shadow: !config || config.shadow !== false,
38 renderTo: document.body
41 this.el = this.proxy.el;
43 this.el.setVisibilityMode(Ext.Element.VISIBILITY);
46 this.ghost = Ext.get(this.el.dom.childNodes[1]);
47 this.dropStatus = this.dropNotAllowed;
50 * @cfg {String} [dropAllowed="x-dd-drop-ok"]
51 * The CSS class to apply to the status element when drop is allowed.
53 dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
55 * @cfg {String} [dropNotAllowed="x-dd-drop-nodrop"]
56 * The CSS class to apply to the status element when drop is not allowed.
58 dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
61 * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
62 * over the current target element.
63 * @param {String} cssClass The css class for the new drop status indicator image
65 setStatus : function(cssClass){
66 cssClass = cssClass || this.dropNotAllowed;
67 if(this.dropStatus != cssClass){
68 this.el.replaceCls(this.dropStatus, cssClass);
69 this.dropStatus = cssClass;
74 * Resets the status indicator to the default dropNotAllowed value
75 * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
77 reset : function(clearGhost){
78 this.el.dom.className = Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed;
79 this.dropStatus = this.dropNotAllowed;
81 this.ghost.update("");
86 * Updates the contents of the ghost element
87 * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
88 * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
90 update : function(html){
91 if(typeof html == "string"){
92 this.ghost.update(html);
94 this.ghost.update("");
95 html.style.margin = "0";
96 this.ghost.dom.appendChild(html);
98 var el = this.ghost.dom.firstChild;
100 Ext.fly(el).setStyle('float', 'none');
105 * Returns the underlying proxy {@link Ext.Layer}
106 * @return {Ext.Layer} el
113 * Returns the ghost element
114 * @return {Ext.Element} el
116 getGhost : function(){
122 * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
124 hide : function(clear) {
132 * Stops the repair animation if it's currently running
135 if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
141 * Displays this proxy
145 this.proxy.toFront();
149 * Force the Layer to sync its shadow and shim positions to the element
152 this.proxy.el.sync();
156 * Causes the proxy to return to its position of origin via an animation. Should be called after an
157 * invalid drop operation by the item being dragged.
158 * @param {Number[]} xy The XY position of the element ([x, y])
159 * @param {Function} callback The function to call after the repair is complete.
160 * @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
162 repair : function(xy, callback, scope){
163 this.callback = callback;
165 if (xy && this.animRepair !== false) {
166 this.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
167 this.el.hideUnders(true);
168 this.anim = this.el.animate({
169 duration: this.repairDuration || 500,
176 callback: this.afterRepair,
185 afterRepair : function(){
187 if(typeof this.callback == "function"){
188 this.callback.call(this.scope || this);
190 this.callback = null;
195 Ext.destroy(this.ghost, this.proxy, this.el);