2011-04-19 2 views
19

J'ai quelques problèmes avec Extjs4 librairie. Je souhaite utiliser le composant treeEditor.Ext.loader non activé Manquant requis?

erreur Firebug:

Erreur: exception non interceptée: Ext.Loader n'est pas activé, si dépendances ne peut être résolu dynamiquement. Manquant classe requise: Ext.tree.TreeNode

Mon 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); 

     }); 

Merci :)

Répondre

50

L'erreur est due à ne pas permettre le chargeur. Vous pouvez activer la Ext.Loader par:

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

Vous devez appeler cela au début de la méthode onReady.

+0

Ça ne marche pas trop! J'ai cette erreur après: Erreur: uncaught exception: Erreur lors de la tentative de chargement de la classe 'Ext.tree.TreeEditor 'from path' ./tree/TreeEditor.js ': undefined – Mepps

+0

La nouvelle erreur est parce qu'il n'y a pas de fichier TreeEditor.js dans la source Ext JS! Je pense que vous devrez attendre que Sencha le lâche. –

+0

Oh Ok ..! Je vois TreeGrid sur le doc sencha! Merci beaucoup pour les réponses :) – Mepps

2

Cela a fonctionné pour moi dans ExtJs 4. Juste ajouté Ext.Loader.setConfig({enabled:true}); en haut de l'app.js.

1

Le vrai problème est que vous utilisez ext-debug.js, ext.js

utiliser: ext-all.js ou ext-dev.js

une lecture sur le chargement dynamique

exemple index.html:

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

Dans l'exemple que vous ne avez pas besoin pour activer le chargement dynamique, car le chargement dynamique de son pour les environnements de développement. ext-all.js, ext.js est pour le déploiement. ext-all-debug.js et ext-debug.js sont pour le débogage après le déploiement. MVC et le chargement dynamique sont inutiles en déploiement, car vous devez avoir 1 fichier généré par sencha cmd (aka Sencha Tools).

1

J'ai regardé ceci et ai dû prendre du recul pendant une seconde car je suis un débutant d'ExtJS. Je n'ai pas été clair sur ce qui a été dit à propos de la déclaration générale de l'endroit avant l'appel OnReady.

Ce qui suit sur le site Web Sencha API Docs pour la version 5.0 montre également cet exemple pour une bonne compréhension de l'emplacement de l'appel à la classe Ext.Loader. C'est un peu exagéré avec plusieurs tags JavaScript à mon avis cependant.

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

Le changement que j'ai apporté à mon propre code personnel a été ajouté ci-dessous et cela a bien fonctionné. C'est très simpliste.

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

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

}); 

Si vos problèmes ayant avec le chargeur alors vous voudrez probablement passer en revue les Ext.require et les classes Ext.exclude aussi d'acquérir cette compréhension de la façon dont ceux-ci interagissent pour charger vos classes personnalisées.

Questions connexes