PDA

View Full Version : Traverse DOM Element to get Component Id



mrinaljena
26 Sep 2009, 8:50 PM
Hi, i am new to ExtJS so sorry for my ignorance. I am making drag-n-drop i.e., dragging from Tree node to columns (in Table layout). Below is the code im writing for it. I am able to get my target(columns) element id. Could i use this element id to get back its corresponding Component id?

var target = Ext.getCmp("Item 1").body.dom;
var dropSomething = new Ext.dd.DropTarget(target, {
ddGroup : 'dragdashboard',
notifyDrop : function(ddSource, e, data)
{

var el = e.getTarget();
Ext.fly(el).update("Test");
}
});


Thanks,
Mrinal

arandal
26 Sep 2009, 9:34 PM
Try this:



var target = Ext.getCmp("Item 1").body.dom;
var dropSomething = new Ext.dd.DropTarget(target, {
ddGroup : 'dragdashboard',
notifyDrop : function(ddSource, e, data)
{
var el = e.getTarget();
var id = Ext.get(el).id;
Ext.fly(el).update("Test");
}
});

mrinaljena
26 Sep 2009, 9:43 PM
Thanks for your quick response. I tried to make an alert of "id" but it gives me "ext-gen120" as its id which is not my component id. I guess it is the DOM element i am getting now. Could i use this "id" and get its component id back?

arandal
26 Sep 2009, 10:29 PM
Yes, I see that the DropTarget is attached to your components body element, therefore the id you are getting should be for the body element. I'm not sure what type of component you are using but for instance, if your component is a GridPanel you might try something like this.



var target = Ext.getCmp("Item 1").body.dom;
var dropSomething = new Ext.dd.DropTarget(target, {
ddGroup : 'dragdashboard',
notifyDrop : function(ddSource, e, data)
{
var el = Ext.get(e.getTarget());
var gridEl = el.findParent('div.x-grid-panel', 10, true);
var grid = Ext.getCmp(gridEl.id);
var id = grid.getId();

Ext.fly(el).update("Test");
}
});
I haven't tested this but I think it should work.

mrinaljena
26 Sep 2009, 10:44 PM
Well in this piece of code var target = Ext.getCmp("Item 1").body.dom; , "Item 1" is the Component Id of the Table layout(3 columns) i am making it as my first drop target. And later var el = Ext.get(e.getTarget()); , i was trying to get individual coulmn component id(of Table layout) so that in my second drop i could use this coulmn component id as target and add some message on each coulmns.

Thanks,
Mrinal

arandal
27 Sep 2009, 10:40 AM
Ok, I understand where you are going with this. First of all, you are actually trying to get the id of the panel that is using the table layout since a layout is not a component but rather, a mechanism the panel uses to control how it positions and/or sizes its children and has no id of its own.

It would be much easier to give you a good answer if I could see your code for creating the panel that is using the table layout, but it sounds like you have two possible options:

1. Attach a separate dropTarget to each child component and handle each individually, or

2. Attach a DropZone to the containing panel and register each of the child components using Ext.dd.Registry.register() to allow them to be individual targets within the DropZone.

I personally would opt for the latter.

mrinaljena
27 Sep 2009, 11:00 AM
Thanks for your reply. Let me try with this.


Thanks,
Mrinal

marcora
6 Nov 2009, 2:17 AM
I am having the same problem, and would be pleased if you could share the solution, if found.

In particular, I am curious to know if it was solved with findParent or using Ext.dd.Registry.register().

I am particularly interested in the latter solution, as I don't quite understand how it works, an example code would be greatly appreciated.

Thanx in advance for your help,

Dado

Animal
6 Nov 2009, 2:28 AM
Yes, I see that the DropTarget is attached to your components body element, therefore the id you are getting should be for the body element. I'm not sure what type of component you are using but for instance, if your component is a GridPanel you might try something like this.



var target = Ext.getCmp("Item 1").body.dom;
var dropSomething = new Ext.dd.DropTarget(target, {
ddGroup : 'dragdashboard',
notifyDrop : function(ddSource, e, data)
{
var el = Ext.get(e.getTarget());
var gridEl = el.findParent('div.x-grid-panel', 10, true);
var grid = Ext.getCmp(gridEl.id);
var id = grid.getId();

Ext.fly(el).update("Test");
}
});
I haven't tested this but I think it should work.

On the right track, just a misreading of the question.

That's what you should do: Find a parent of the target being examined.

But to get a Component which has been added as a column:



var dropSomething = new Ext.dd.DropTarget(target, {
ddGroup : 'dragdashboard',
notifyDrop : function(ddSource, e, data) {
var el = Ext.get(e.getTarget());
var columnEl= e.getTarget('.x-column', <the main element of the DropTarget>);
var columnComponent = Ext.getCmp(gridEl.id);
console.log("Dropping on ", columnComponent);
}
});

Animal
6 Nov 2009, 2:29 AM
Check the examples in your examples/dd directory.

They show how to use a DropZone to drop into items within an overall Component.

In particular, dragdropzones.html

marcora
6 Nov 2009, 8:23 AM
I have read the docs and examples ad nauseam and still can't make it work.

I have a panel containing several subpanels (with custom class 'item'), which I want to be dragged around by the user within the container panel to allow for manual reordering of the subpanels. Therefore, I need to know whether subpanel is being dropped on the container panel or on a subpanel. The draggable prop of subpanels is set to a config with ddGroup: 'items'. Then the body of the container panel is set to be a dropzone as such:



afterrender: {
fn: function() {
var panel = this;
var selectedDropZoneEl = panel.body;
var selectedDropZone = new Ext.dd.DropZone(selectedDropZoneEl, {
ddGroup: 'items',

onNodeDrop: function(target, ddSource, e, data) {
console.info('node drop');
return true;
},

onContainerDrop: function(target, ddSource, e, data) {
console.info('container drop');
return true;
},
getTargetFromEvent: function(e) {
console.dir(e);
return e.getTarget('.item');
}
});
},
scope: this // panel
}


The odd thing is that when inspecting 'e' in getTargetFromEvent it turns out to be the subpanel ghost. Thus, it cannot find the subpanel divs with class 'item' and always fires onContainerDrop, but never onNodeDrop. I am a bit confused at this point! Mu understanding of the docs/examples is that 'e' in getTargetFromEvent should relate to the drop target, not the ghost.

Thanx all for your help,

Dado

Animal
6 Nov 2009, 10:33 AM
That example contains comments in the source that are VERY long and explanatory. Anything that I could say here, I have already said there.

http://www.extjs.com/deploy/dev/examples/dd/dragdropzones.html

Click the ViewSource button at the bottom.

getTargetFromEvent should return the target you are over.

Of course the mouse must be offset from the ghost, which it is when using a DragSource on the other side. All this is in that example.