Reputation: 776

Ext.loader not enabled Missing required?

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

Upvotes: 19

Answers (4)

Brian H

Reputation: 256

I looked at this and had to step back for a second as I am an ExtJS newbie. I was not clear on what was said about the Generalized statement of place it before the OnReady call.

The following on the Sencha API Docs web site for version 5.0 also shows this example for a good understanding of placement for the call to the Ext.Loader class. Its a little overblown with multiple JavaScript tags in my opinion though.

<script type="text/javascript" src="ext-core-debug.js"></script>
<script type="text/javascript">
    Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'My': 'my_own_path'
      }
    });
</script>
<script type="text/javascript">
    Ext.require(...);

    Ext.onReady(function() {
      // application code here
    });
</script>

The change I made to my own personal code I added as below and it worked fine also. This is very simplistic.

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

Ext.application({
    name                : 'MyApp',
    appFolder           : 'app',
    controllers         : [
        'MyApp.controller.item.Item'
    ],
    autoCreateViewport  : true

});

If your having problems with the Loader then you probably want to review the Ext.require and the Ext.exclude classes too to gain that understanding of how these interact to load your custom classes.

Upvotes: 1

chepike

Reputation: 59

The real problem is that you are using ext-debug.js, ext.js

instead use: ext-all.js or ext-dev.js

An read about Dynamic Loading

index.html example:

<html>
  <head>
      <title>Hello Ext</title>
      <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
      <script type="text/javascript" src="ext-4/ext-dev.js"></script>
      <script type="text/javascript" src="app.js"></script>
  </head>
  <body></body>
</html>

In the example you dont need to enable Dynamic Loading, because dynamic loading its for development environments. ext-all.js, ext.js is for deploy. ext-all-debug.js and ext-debug.js are for debugging after deploy.

MVC and Dynamic Loading are useless in deploy, because you must have 1 file generated by sencha cmd (aka Sencha Tools).

Upvotes: 1