Results 1 to 9 of 9

Thread: DOM element in Element cache is not the same

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-15584 in 5.1.4.
  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    318

    Default DOM element in Element cache is not the same

    I have menu panel and I'm adding new tabs dynamically when user click on menu item:

    Code:
    tabPanel.add({
                    title: title,
                    xtype: 'panel',
                    autoDestroy: true,
                    closable: true,
                    layout: 'fit',
                    itemId: itemId,
                    items: [{
                        xtype: 'uxiframe',
                        src: href
                    }]
                });
    Each tab has some external page as iFrame(extjs3 page, asp page,..).

    When I add second tab and third tab, and so on... i get the following error:

    "Uncaught Error: DOM element with id ext-gen2 in Element cache is not the same as element in the DOM. Make sure to clean up Element instances using destroy()"

    Is this error because of external pages(since they are written in extjs 3) or it is something else?

    How can i get rid of this error?

    br, Simon
    Last edited by slemmon; 28 Oct 2014 at 9:48 AM. Reason: Thread moved to the bugs forum

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    This appears to be a bug.

    I've moved the thread to the bugs forum and have filed the issue with engineering.

    Fiddle:
    https://fiddle.sencha.com/#fiddle/ced

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    318

    Default

    Do you maybe know when this bug will be fixed or where i can track it? This post or some other place?

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    318

    Default

    Anything new about this bug?

  5. #5
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    Default

    Any known workaround?I have open Sencha ticket 21763 for this old issue known since October 2014.

  6. #6
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    Default

    I think the problem is that Ext JS hardcoded to assign the same id for window and document, and so when we have an iframe that makes two windows:

    Extract from http://docs-origin.sencha.com/extjs/...ic-method-get:
    Code:
    var WIN = window,        
    DOC = document,        
    windowId = 'ext-window',        
    documentId = 'ext-document',
    ...
    // Must use == here, otherwise IE fails to recognize the window
    if (el == WIN) {
       el.id = windowId;
    }

  7. #7
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    Default

    All the code generating this from 'Ext.ux.IFrame' is not able to support cross origin, so iframe pointing to a different domain, so the code has low value.

    Instead, in my application I use postMessage, which is cross browser including IE 8 and work with cross origin see: http://javascript.info/tutorial/cross-window-messaging-with-postmessage

    So the fix in my application have been to write an override that remove all the code involving listeners in 'Ext.ux.IFrame'. Ideally the IFrame class should be rewritten to add support for postMessage.

  8. #8
    Sencha Premium User
    Join Date
    Mar 2015
    Posts
    10

    Default

    Hi SebTardif,

    Would you mind sharing your overrides for the Ext.ux.IFrame? I too am having this error when trying to cleanup listeners for the IFrame. My scenario involves having an extjs application in a uxiframe.

    Thanks,
    Aldrich

    Quote Originally Posted by SebTardif View Post
    All the code generating this from 'Ext.ux.IFrame' is not able to support cross origin, so iframe pointing to a different domain, so the code has low value.

    Instead, in my application I use postMessage, which is cross browser including IE 8 and work with cross origin see: http://javascript.info/tutorial/cross-window-messaging-with-postmessage

    So the fix in my application have been to write an override that remove all the code involving listeners in 'Ext.ux.IFrame'. Ideally the IFrame class should be rewritten to add support for postMessage.

  9. #9
    Sencha User
    Join Date
    Apr 2015
    Location
    Moscow
    Posts
    10

    Default

    Unless you want to bubbling events with IFrame doc.

    Do override Ext.ux.IFrame :

    Code:
    onLoad: function() {
       var me = this,
       doc = me.getDoc();
    
    if (doc) {
          Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
          this.el.unmask();
          this.fireEvent('load', this);
    
    } else if (me.src) {
          this.el.unmask();
          this.fireEvent('error', this);
      }
    }

Posting Permissions

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