Traverse DOM Element to get Component Id

[mrinaljena]

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]

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]

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]

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]

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]

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]

Thanks for your reply. Let me try with this.


Thanks,
Mrinal

[marcora]

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]

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]

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