2011-04-19 12 views
19

Tengo algunos problemas con Extjs4 librairie. Quiero usar el componente treeEditor.Ext.loader no habilitado ¿Falta la información requerida?

error Firebug:

error: excepción no detectada: Ext.Loader no está activado, por lo dependencias no se puede resolver de forma dinámica . Missing clase requerida: Ext.tree.TreeNode

Mi código:

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

     }); 

Gracias :)

Respuesta

50

El error es debido a que no permite al cargador. Puede activar la Ext.Loader por:

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

Es necesario llamar a esto en el inicio de onReady método.

+0

¡No funciona demasiado! Tengo este error después de: Erreur: excepción no detectada: Error al intentar cargar la clase 'Ext.tree.TreeEditor 'from path' ./tree/TreeEditor.js ': undefined – Mepps

+0

¡El nuevo error se debe a que no existe un archivo TreeEditor.js en el origen de Ext JS! Creo que tendrás que esperar a que Sencha lo libere. –

+0

¡Oh Ok ..! Veo TreeGrid en el doc sencha! Muchas gracias a las respuestas :) – Mepps

2

Esto funcionó para mí en ExtJs 4. Acabo de agregar Ext.Loader.setConfig({enabled:true}); a la parte superior de la aplicación.js.

1

El verdadero problema es que está utilizando ext-debug.js, ext.js

utilizar en su lugar: ext-all.js o ext-dev.js

una lectura sobre Dynamic Cargando

ejemplo

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> 

En el ejemplo que usted no tenga que habilitar dinámico de carga, debido a su dinámica de carga para entornos de desarrollo. ext-all.js, ext.js es para desplegar. ext-all-debug.js y ext-debug.js son para la depuración después de la implementación.

MVC y carga dinámica son inútiles en la implementación, porque debe tener 1 archivo generado por sencha cmd (también conocido como Sencha Tools).

1

Miré esto y tuve que dar un paso atrás por un segundo ya que soy un novato ExtJS. No estaba seguro de lo que se dijo sobre la declaración de lugar generalizada antes de la llamada OnReady.

Lo siguiente en el sitio web Sencha API Docs para la versión 5.0 también muestra este ejemplo para una buena comprensión de la ubicación de la llamada a la clase Ext.Loader. Aunque es un poco exagerado con múltiples etiquetas de JavaScript, en mi opinión.

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

El cambio que hice a mi propio código personal que añade que a continuación y que trabajó muy bien también. Esto es muy simplista

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

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

}); 

Si los que tienen problemas con el cargador entonces es probable que quieren revisar la Ext.require y las clases Ext.exclude demasiado para obtener esa comprensión de cómo estas interactúan para cargar las clases personalizadas.

Cuestiones relacionadas