3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.dd.StatusProxy
9 * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the
10 * default drag proxy used by all Ext.dd components.
12 * @param {Object} config
14 Ext.dd.StatusProxy = function(config){
15 Ext.apply(this, config);
16 this.id = this.id || Ext.id();
17 this.el = new Ext.Layer({
19 id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
20 {tag: "div", cls: "x-dd-drop-icon"},
21 {tag: "div", cls: "x-dd-drag-ghost"}
24 shadow: !config || config.shadow !== false
26 this.ghost = Ext.get(this.el.dom.childNodes[1]);
27 this.dropStatus = this.dropNotAllowed;
30 Ext.dd.StatusProxy.prototype = {
32 * @cfg {String} dropAllowed
33 * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
35 dropAllowed : "x-dd-drop-ok",
37 * @cfg {String} dropNotAllowed
38 * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
40 dropNotAllowed : "x-dd-drop-nodrop",
43 * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
44 * over the current target element.
45 * @param {String} cssClass The css class for the new drop status indicator image
47 setStatus : function(cssClass){
48 cssClass = cssClass || this.dropNotAllowed;
49 if(this.dropStatus != cssClass){
50 this.el.replaceClass(this.dropStatus, cssClass);
51 this.dropStatus = cssClass;
56 * Resets the status indicator to the default dropNotAllowed value
57 * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
59 reset : function(clearGhost){
60 this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
61 this.dropStatus = this.dropNotAllowed;
63 this.ghost.update("");
68 * Updates the contents of the ghost element
69 * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
70 * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
72 update : function(html){
73 if(typeof html == "string"){
74 this.ghost.update(html);
76 this.ghost.update("");
77 html.style.margin = "0";
78 this.ghost.dom.appendChild(html);
80 var el = this.ghost.dom.firstChild;
82 Ext.fly(el).setStyle('float', 'none');
87 * Returns the underlying proxy {@link Ext.Layer}
88 * @return {Ext.Layer} el
95 * Returns the ghost element
96 * @return {Ext.Element} el
98 getGhost : function(){
104 * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
106 hide : function(clear){
114 * Stops the repair animation if it's currently running
117 if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
123 * Displays this proxy
130 * Force the Layer to sync its shadow and shim positions to the element
137 * Causes the proxy to return to its position of origin via an animation. Should be called after an
138 * invalid drop operation by the item being dragged.
139 * @param {Array} xy The XY position of the element ([x, y])
140 * @param {Function} callback The function to call after the repair is complete.
141 * @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
143 repair : function(xy, callback, scope){
144 this.callback = callback;
146 if(xy && this.animRepair !== false){
147 this.el.addClass("x-dd-drag-repair");
148 this.el.hideUnders(true);
149 this.anim = this.el.shift({
150 duration: this.repairDuration || .5,
154 callback: this.afterRepair,
163 afterRepair : function(){
165 if(typeof this.callback == "function"){
166 this.callback.call(this.scope || this);
168 this.callback = null;
173 Ext.destroy(this.ghost, this.el);