crp_spaeth
25 Oct 2009, 4:01 AM
Hi there, I just started to learn more about DD in Extjs.
And I was wondering If there is a big deal to Override the DragSource autoOffset function.
What is this about?
The default behavior of a Systems Drag operation in Windows or Osx is that the dragedobject is "picked-up" by the cursor and the proxy placed directly under the curserposition as it has been picked up. This is the default behave of the DD class as well.
Things get changed when you use a subclass of the DragSource since it overrides the autoOffset Function of DD so the Dragged Object(s) is placed 12 pixels left and 20 pixels below the cursor Position.
Does this happens for a special functional reason (like Mouseevents) or can I override the autoOffset function like that without destroying the whole DnD thing:
Ext.override(Ext.dd.DragSource, {
autoOffset : function(x, y){
if(this.proxy)
this.proxy.setDropIconOffset(x, y);
Ext.dd.DragSource.superclass.autoOffset.apply(this, arguments);
}
})
To complete this I would override Ext.dd.StatusProxy in the following Way:
Ext.dd.StatusProxy = Ext.extend(Ext.dd.StatusProxy, {
constructor : function(config){
Ext.apply(this, config);
this.id = this.id || Ext.id();
this.el = new Ext.Layer({
dh: {
id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
{tag: "div", cls: "x-dd-drop-icon"},
{tag: "div", cls: "x-dd-drag-ghost"}
]
},
shadow: !config || config.shadow !== false
});
this.dropIcon = Ext.get(this.el.dom.childNodes[0]);
this.ghost = Ext.get(this.el.dom.childNodes[1]);
this.dropStatus = this.dropNotAllowed;
},
setDropIconOffset : function(x, y){
this.dropIcon.setStyle('position', 'absolute');
console.log(x, y);
this.dropIcon.setStyle('left', x+5);
this.dropIcon.setStyle('top', y-5);
}
})
What do you think about that?
And I was wondering If there is a big deal to Override the DragSource autoOffset function.
What is this about?
The default behavior of a Systems Drag operation in Windows or Osx is that the dragedobject is "picked-up" by the cursor and the proxy placed directly under the curserposition as it has been picked up. This is the default behave of the DD class as well.
Things get changed when you use a subclass of the DragSource since it overrides the autoOffset Function of DD so the Dragged Object(s) is placed 12 pixels left and 20 pixels below the cursor Position.
Does this happens for a special functional reason (like Mouseevents) or can I override the autoOffset function like that without destroying the whole DnD thing:
Ext.override(Ext.dd.DragSource, {
autoOffset : function(x, y){
if(this.proxy)
this.proxy.setDropIconOffset(x, y);
Ext.dd.DragSource.superclass.autoOffset.apply(this, arguments);
}
})
To complete this I would override Ext.dd.StatusProxy in the following Way:
Ext.dd.StatusProxy = Ext.extend(Ext.dd.StatusProxy, {
constructor : function(config){
Ext.apply(this, config);
this.id = this.id || Ext.id();
this.el = new Ext.Layer({
dh: {
id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
{tag: "div", cls: "x-dd-drop-icon"},
{tag: "div", cls: "x-dd-drag-ghost"}
]
},
shadow: !config || config.shadow !== false
});
this.dropIcon = Ext.get(this.el.dom.childNodes[0]);
this.ghost = Ext.get(this.el.dom.childNodes[1]);
this.dropStatus = this.dropNotAllowed;
},
setDropIconOffset : function(x, y){
this.dropIcon.setStyle('position', 'absolute');
console.log(x, y);
this.dropIcon.setStyle('left', x+5);
this.dropIcon.setStyle('top', y-5);
}
})
What do you think about that?