Results 1 to 3 of 3

Thread: Dom element getting destroyed

  1. #1

    Default Dom element getting destroyed

    I was implementing a treepanel and the top level I have a column which contains a DOM element stated in html on the description field:

    Code:
    parentClientNode = treePanel.getRootNode().appendChild(
    {
    name: jsonStuff.tree[i].parentClientCode, idx: i, description: jsonStuff.tree[i].parentClientName + "<i class='x-fa fa-info-circle' id='myid" + i + "></i>", leaf: false
    });
    That html contains an 'i' icon aligned on the right. That icon is then added an event which will use some information from that node itself - in this case, only a console to prove that it is being called with the right parameters:

    Code:
     
    var domIcon = Ext.get('myid' + i);                          
    var level1Function = function(node){
    console.log(node.data.name);
    }; domIcon.on(
    'mouseover', Ext.bind(level1Fun, null, parentClientNode, false)
    );
    All this code is run in a Ajax.request callback and the mouseover events do work. However, after a while I notice that the <i> dom elements are destroyed and the events disappear despite the Ext.get() method still returning the elements for the given id.

    Why does this happen ? Is it normal that after typing Ext.get() on the browser's console for an existing id that element is instantly destroyed, and the events destroyed with it ?

    Thanks in advance.

  2. #2
    Sencha Premium User
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    418
    Answers
    17

    Default

    It could be that your tree is being refreshed and the nodes re-rendered, causing your Description HTML to be readded, and subsequently losing the listener.

    I would recommend using event delegation so you don't need to maintain these individual event listeners, and any new/refreshed nodes will have the events handled automatically.

    In short, add a listener to the tree's element and decide if the event is firing for the correct <i> element based on class/ids.

  3. #3

    Default

    Quote Originally Posted by StuartAshworth View Post
    It could be that your tree is being refreshed and the nodes re-rendered, causing your Description HTML to be readded, and subsequently losing the listener.

    I would recommend using event delegation so you don't need to maintain these individual event listeners, and any new/refreshed nodes will have the events handled automatically.

    In short, add a listener to the tree's element and decide if the event is firing for the correct <i> element based on class/ids.
    Thanks. I understand your solution, but basically what would happen is that I would lose the ability to pass the nodes as arguments, as I can do that with Ext.bind.

Similar Threads

  1. [FIXED] HtmlEditor destroys iframe element twice when destroyed
    By kbogle in forum Ext 5: Bugs
    Replies: 1
    Last Post: 23 Jul 2014, 3:02 PM
  2. Replies: 0
    Last Post: 10 Jun 2013, 1:59 PM
  3. [FIXED] DockLayout attempts to manipulate DOM element after it's been destroyed
    By Animal in forum Sencha Touch 1.x: Bugs
    Replies: 27
    Last Post: 13 Jan 2012, 5:25 AM
  4. [CLOSED] [4.0.6] Masking a Destroyed Element Produces JS Error
    By ZachG in forum Ext:Bugs
    Replies: 3
    Last Post: 4 Oct 2011, 4:28 AM
  5. Replies: 1
    Last Post: 7 Dec 2010, 12:02 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •