ExtJS4 to ExtJs5 Migation - ext-all-debug.js - cacheRefEls-function

Question

I am migrating a project from ExtJs4 to ExtJs5.

In my Firefox (Version 33.0.2)-Debug-View (Firebug Version 2.0.4) i can see the following Console-output, after refreshing my browser window:

TypeError: dom.querySelectorAll is not a function
http://localhost:8080/ext/build/ext-all-debug.js
Line 34531

How to fix that error OR how to find out which part of my own code does cause ext-all-debug.js to nag?

@Lolo: Please read the second sentence out loud for yourself. — kiltek
Firefox has 33 major releases, and trust me, version may make difference — Krzysztof

kiltek kiltek · Accepted Answer · 2014-11-03T10:10:11

I adapted the native ExtJs5 cacheRefEls-function defined inside ext-all-debug.js into the following, after putting multiple console.log() into it, which indicated that the dom is not returning a tree:

cacheRefEls: function(el) {
    el = el || this.el;

    var cache = null;
        try{
            cache = Ext.cache,
            El = Ext.dom.Element,
            dom = el.isElement ? el.dom : el,
            refs = dom.querySelectorAll('[data-ref]'),
            len = refs.length,
            ref, i;
            //console.log("Success: 'Nodelist' returned by 'el.dom.querySelectorAll('[data-ref]')' for el--->"+el + " 'cache-variable is set!'");
         }catch(err){
             //console.log("Error: No 'Nodelist' returned by 'el.dom.querySelectorAll('[data-ref]')' for el--->"+el + " 'Couldn't set cache-variable!'");
         }

         for (i = 0; i < len; i++) {
             ref = refs[i];
             if (!cache[ref.id]) {
                  new El(ref);
             }
         }
}

This avoids that the dom-tree is accessed for el's that do not have such a tree, like for example Text-objects.

P.S.: Use this fix with care, because it fiddles around with the native code provided by Sencha.

ExtJS4 to ExtJs5 Migation - ext-all-debug.js - cacheRefEls-function

1 Answers