Ext.loader not enabled Missing required?

Question

I have some problems with Extjs4 librairie. I want to use treeEditor component.

Firebug error :

Error : uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.tree.TreeNode

My code :

Ext.require([

'Ext.form.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.data.*',
'Ext.util.*',
'Ext.loader.*',
'Ext.state.*',
'Ext.layout.container.Column',
'Ext.tab.TabPanel'

]);

Ext.onReady(function(){

    // shorthand
    Ext.QuickTips.init();


    var tree = Ext.create('Ext.tree.TreePanel', {
            animate:false,
            enableDD:false,
    //      loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
            lines: true,
            rootVisible:false,
        //  selModel: new Ext.tree.MultiSelectionModel(),
            containerScroll: false
    });

        // set the root node
        var root = Ext.create('Ext.tree.TreeNode',{
            text: 'Autos',
            draggable:false,
            id:'source'
        });

        tree.on('contextmenu',showCtx);
        tree.on('click',function(node,e){node.select();return false;});
        // json data describing the tree

        var json = [
                {"text" : "1","allowEdit" : true, "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
                {"text" : "11","allowEdit" : true, "id" : 3000, "leaf" : false, "cls" : "folder","children" :[
                {"text" : "111","allowEdit" : true, "id" : 300, "leaf" : false, "cls" : "folder","children" :[
                {"text" : "1111","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "1112","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "1113","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"}
                ]},
                {"text" : "112","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "113","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"}
                ]},
                {"text" : "12","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "13","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"}
                ]},
                {"text" : "2","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file"},
                {"text" : "3","allowEdit" : true, "id" : 300, "leaf" : true, "cls" : "file",iconCls:'node'}
                ];

                for(var i = 0, len = json.length; i < len; i++) {
                root.appendChild(tree.getLoader().createNode(json[i]));
                }

        var ge = Ext.create('Ext.tree.TreeEditor',tree,{},{
            allowBlank:false,
            blankText:'Nom du dossier',
            selectOnFocus:true,
            cancelOnEsc:true,
            completeOnEnter:true,
            ignoreNoChange:true,
            updateEl:true
            });

            /*ge.on('beforestartedit', function(){

            if(!ge.editNode.attributes.allowEdit){
                return false;
            }
                });*/

        tree.setRootNode(root);
        tree.render();
        root.expand(true);

        });

Thanks :)

Answer 1

The error is due to not enabling the Loader. You can enable the Ext.Loader by:

Ext.Loader.setConfig({enabled:true});

You need to call this at the start of onReady method.

Answer 2

This worked for me in ExtJs 4. Just added Ext.Loader.setConfig({enabled:true}); to the top of the app.js.