1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    8
    Vote Rating
    0
    mrinaljena is on a distinguished road

      0  

    Question Traverse DOM Element to get Component Id

    Traverse DOM Element to get Component Id


    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

  2. #2
    Ext User arandal's Avatar
    Join Date
    Feb 2008
    Location
    Tacoma, WA (Seattle area)
    Posts
    9
    Vote Rating
    1
    arandal is on a distinguished road

      0  

    Default


    Try this:

    Code:
        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");               
             }
        });

  3. #3
    Ext User
    Join Date
    Aug 2009
    Posts
    8
    Vote Rating
    0
    mrinaljena is on a distinguished road

      0  

    Question


    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?

  4. #4
    Ext User arandal's Avatar
    Join Date
    Feb 2008
    Location
    Tacoma, WA (Seattle area)
    Posts
    9
    Vote Rating
    1
    arandal is on a distinguished road

      1  

    Default


    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.

    Code:
        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.

  5. #5
    Ext User
    Join Date
    Aug 2009
    Posts
    8
    Vote Rating
    0
    mrinaljena is on a distinguished road

      0  

    Question


    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

  6. #6
    Ext User arandal's Avatar
    Join Date
    Feb 2008
    Location
    Tacoma, WA (Seattle area)
    Posts
    9
    Vote Rating
    1
    arandal is on a distinguished road

      0  

    Default


    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.
    Last edited by arandal; 27 Sep 2009 at 5:16 PM. Reason: Corrected Ext.dd.Register() to Ext.dd.Registry.register()

  7. #7
    Ext User
    Join Date
    Aug 2009
    Posts
    8
    Vote Rating
    0
    mrinaljena is on a distinguished road

      0  

    Lightbulb


    Thanks for your reply. Let me try with this.


    Thanks,
    Mrinal

  8. #8
    Ext User
    Join Date
    Jan 2008
    Posts
    16
    Vote Rating
    0
    marcora is on a distinguished road

      0  

    Smile Found a solution?

    Found a solution?


    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

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by arandal View Post
    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.

    Code:
        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:

    Code:
        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);
            }
        });

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi