extjs4 - sencha - extjs docs
Ext.loader no habilitado ¿Falta un archivo? (4)
El error se debe a no habilitar el cargador. Puede habilitar el Ext.Loader por:
Ext.Loader.setConfig({enabled:true});
onReady llamar a esto al inicio del método onReady .
Tengo algunos problemas con Extjs4 librairie. Quiero usar el componente treeEditor.
Error de Firebug:
Error: excepción no detectada: Ext.Loader no está habilitado, por lo que las dependencias no se pueden resolver de forma dinámica. Falta la 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 :)
El problema real es que está utilizando ext-debug.js, ext.js
en su lugar usa: ext-all.js o ext-dev.js
Una lectura sobre Carga dinámica
Ejemplo de 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, no es necesario habilitar la Carga dinámica, ya que la carga dinámica es para entornos de desarrollo. ext-all.js, ext.js es para despliegue. ext-all-debug.js y ext-debug.js son para la depuración después de la implementación.
MVC y Dynamic Loading son inútiles en la implementación, ya que debe tener 1 archivo generado por sencha cmd (también conocido como Sencha Tools).
Esto me funcionó en ExtJs 4. Acaba de agregar Ext.Loader.setConfig({enabled:true}); a la parte superior de la app.js.
Miré esto y tuve que retroceder un segundo porque soy un novato de ExtJS. No tenía claro lo que se dijo sobre la declaración generalizada de lugar antes de la llamada OnReady.
Lo siguiente en el sitio web de 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. Es un poco exagerado con varias etiquetas de JavaScript en mi opinión, sin embargo.
<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 lo agregué como se muestra a continuación y también funcionó bien. Esto es muy simplista.
Ext.Loader.setConfig({enabled:true});
Ext.application({
name : ''MyApp'',
appFolder : ''app'',
controllers : [
''MyApp.controller.item.Item''
],
autoCreateViewport : true
});
Si tiene problemas con el cargador, entonces probablemente quiera revisar las clases Ext.require y Ext.exclude para comprender mejor cómo interactúan éstas para cargar sus clases personalizadas.