Foro

Componentes Dinamicos de Ext js

0
Ya he leido muchos post sobre el mismo tema o muy relacionado pero con pocas respuestas, creo que todos queremos hacer elementos dinamicos para no te ner que programar cada panatalla. el objeto config de Ext es un simple Json muy facil de construir pero como hacer que Ext lo entienda ? en mi caso particular tengo el menu dinamico cargo los items del menu con una llamada Ext.Ajax.request en el evento beforerender y funciona muy bien, el problema esta en que dentro del config que cargo del servidor le coloco a los items del menu la propiedad handler , pero en el servidor el Json que se genera tiene todos los valores entre comillas ( {"key" : "value"} ) y el nombre de la funcion que coloco en el handler ( {..., "handler": "com.App.Objeto.Metodo" ,...}) viene asi también y cuando le doy click sobre un elemento Ext js se lanza un error: en el ext-all-debug.js en la linea 1735
if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
mensaje : l.fireFn.apply is not a function,
si agarro el json y lo coloco directamente en mi archivo js y le quito las comillas dejandolo asi {..., "handler": com.App.Objeto.Metodo ,...}, funciona a la perfección. en el mismo codigo coloco
{...., "handler" : eval("com.App.Objeto.Metodo"), ....}
y funciona, no se como hacer lo mismo pero con la respuesta del servidor. algo que se me ocurre es no traer la propiedad handler del servidor sino agregar una propiedad que me de una clave de como encontrar la funcion que se debe ejecutar y asignar el evento click a los elementos del menu, estoy seguro funcionara acontinuacion mi codigo de como cargo los elementos del menu dinamicamente
// funcion del evento
getMenu: function (toolbar) {
    
        Ext.Ajax.request({
            disableCaching: false,
            url: '/modules/Menu.asmx/get',
            scripts: true,
            headers: {
                'Content-Type':'application/json',
                'charset' : 'utf-8'
            },
            success: function(response,options) {
                var data =   eval(Ext.util.JSON.decode(response.responseText));
                toolbar.add(data.d._menuItems);
                toolbar.doLayout(); // este metodo no hace falta llamarlo, es para asegurarme que se dibujen :P
            },
            failure: function(response,options) {alert('fallo')}
        });
    }
// en la region donde quiero colocar el menu dentro del panel
{
            region: 'north',
            
            autoHeight: true,
            border: false,
            items: [{xtype: 'toolbar', listeners: {beforerender: this.getMenu}}]
            
}
el menu se carga bien, lo que no se asignan son los manejadores del evento click de cada menu Gracias por su ayuda, cualquier comentario sera bien recibido y aprovechado y esperemos todos podamos encontrar una solucion a la creacion dinamica de objetos Ext
0
Sabes estoy tratando de hacer lo mismo que tu y no he logrado dar con nada, si se como hacerlo te escribo sin falta.
0
a mi se me complico la cosa por que para recorrer los items del toolbar hay que hacer un método recursivo que recorra un árbol. pero lo pude hacer y para hacerlo mas fácil lo que hice fue recorrer la respuesta json que es mas ligera y en la propiedad handler modificaba por el eval (handler)
preOrderRec(root) {
if(!Ext.isEmpty(root.handler))
// convertir  {..,"handler": "com.App.Objeto,metodo", ...}
// {..,"handler": com.App.Objeto,metodo, ...}
// para que el metodo pueda ser llamado por el error ya mencionado
    root.handler = eval(root.handler)
}
if(!Ext.isEmpty(root.menu)) {
   for(it in root.menu) {
        preOrderRec(root.menu[it]);
    } 
}
y asi pude crear la configuracion del menu de un toolbar de forma dinamica en el servidor y enviando el json para que Ext lo entendiera espero no tener que hacer tantas marañas con los otros componentes ya hasta estoy pensando en hacer unas clases js genericas para algunos Componentes de Ext que son los que mas voy a utilizar, por que tengo pensado tambien crear los grids dinamicamente eso quiere decir que la configuracion del store, de las columnas y de los seleccion models tambien sera dinammica como la del menu y seguro lo voy hacer de la misma forma mientras no encuentre alguna mejor por que tengo que hacer una aplicacion de mas o menos 1500 pantallas y no voy a hacer a mano cada una de las pantallas. Espero comenten y den ideas por que las necesito Gracias a todos por su atencion y colaboración
0
algo que se me ocurrió mientras escribía el pos anterior, seria modificar el ext js para que evaluara si lo que hay en la propiedad del handler justo donde da el error, que si es una cadena hacer el eval en ese punto, pero no tengo ni la menor idea de como hacerlo, así me evitaría hacer el recorrido innecesario sobre los elementos del json para transformar los valores deseados.... ya resolveremos así, creo que es la mejor solución <!-- s:P --><!-- s:P -->
0
no recomiendo este tipo de practicas lo que recomiendo es crear funciones contructoras o como lo llama extjs clases, y para el cargado dinamico crear un loader de js que cuando se quiera cargar algun modulo se le indique al loader que js debe cargar, eso funciona mejor que andar enviando datos del servidor ademas como lo dice DougCrockford el eval es evil, solo se debe usar en casos exepcionales y este no es uno de esos casos si quieren mas ayuda no duden en preguntarme saludos y surtextjs
0
gracias por tu comentario, pero para nosotros que somos novatos, seria posible que colocaras un ejemplo basico de lo que dices...
0
Yo he puesto ejemplos en el foro: <!-- l -->viewtopic.php?f=6&t=116&start=0&hilit=manager<!-- l --> saludos
0
no estamos hablando de lo mismo, los archivos javascritp o modulos si se pueden cargar perfectamente al vuelo... en la configuracion de cada pagina o modulo uno coloca que css y que archivoas js va a utilizar y esos son lo que cargo en mi pagina web... Lo que intengo cargar aqui es la configuracion de los componentes de Ext. en el servidor armo { xtype: 'checkbox', checked: true}, y este lo cargo por ajax para crear mi componente en la pagina que estoy mostrando. el problema que me surigio o la duda ( tal vez no sea un problema ) es que en los atributos del objeto config de los componentes de Ext uno puede definir los listeners y hacer que apunten a una funcion ya definida en los js que tengo cargados, pero esto no funciona por que el json que me devuelve el servidor tiene tanto las claves como los valores entre comillas (") y los nombres de las funciones que le asigne a los eventos del componente que armo no funcionan si las coloco de esa manera. { "text": "menu", "handler" : "com.Utils.mostrarVentanaSaludoPorEjemplo" } y cuando le don click sobre el componente Ext js (en el ejemplo puse la configuracion del menu de un toolbar ) me lanza un error por que no puede realizar nada sombre "com.Utils.mostrarVentanaSaludoPorEjemplo" debe estar asi: { "text": "menu", "handler" : com.Utils.mostrarVentanaSaludoPorEjemplo } vale decir que esto me sucede por que utilizo las funciones del lenguage (PHP y ASP) que utiliza en el servidor para transformar mis objetos (arrays en PHP u objetos en C#) a una cadena json, por que estoy creando dinámicamente la configuración para cada componente para que sea mas automático el proceso... si hago cada uno de los objetos de configuración a mano y coloco textualmente la respuesta por supuesto no voy a tener el problema, pero en este caso no es posible por que son muchas las configuraciones de layout y componentes que tengo ( aprox 1500 ), segudon la definicion de los componentes ( componentes de todas las aplicaciones, algo muy generico ) esta en un servidor que se utiliza para varias aplicaciones (tanto desktops como web). Repito, cargo dinamicamente es la configuracion de los componentes no archivos javascript y es el caso del post que me enviaste y lo que comentas en la parte de hacer un loader. Los js que tengos son los de Ext y alguno que otra clase que arma los componentes así que con esto no tengo problema. La pregunta es como armar la configuración de componentes Ext en el servidor web y enviarlo vía Ajax a mis javascript de manera que también pueda definir los nombres de las funciones javascripts que se ejecutaran con cada evento, en pocas palabras "Por que Ext Js no entiende esto" { "text": "menu", "handler" : "com.Utils.mostrarVentanaSaludoPorEjemplo" } ver el ejemplo completo al principio del post
0
oh ok, entiendo la problematica.... yo lo he resulto de la siguiente manera: el objeto de configuracion que regresa el servidor, para un boton seria algo asi:
{
     "xtype"    : "button",
     "text"      : "Nuevo",
     "icon-cls" : "nuevo-icon",
     "klass"     : "Quizz.training.MiModulo",
     "method"  : "nuevo"
}
y luego en la peticion Ajax que recoje esa info hago algo asi:
var btn = Ext.decode(response.responseText);
Quizz.training.LoadManager.loadScript(btn.klass,function(){
     btn.handler = window[btn.klass][btn.method];
     btn.scope = window[btn.klass];
     toolbar.add(btn);
});
Y listo!! funciona perfecto, LoadManager es un componente que carga dinamicamente el JS y lo agrega al DOM, un vez listo el modulo lo puedo acceder mediante el objeto "window" y asu vez acceder al metodo que quiero ejecutar en el handler. Un aspecto importante a considerar es que "Quizz.training.MiModulo" seria un objeto del cual no se pueden sacar instancias. Este tipo de cosas lo he hecho para crear interfaces dinamicas dependiendo de los roles del usuario donde el servidor define los privilegios de cada usuario. Prueba y me avisas. Saludos
0
excelente, muy claro el ejemplo, era exactamente lo que estaba preguntando. buenisimo!! 20pts
0
Agradecido Stock, es a eso a lo cual queria llegar....
0
Sabes, me queda la duda si esto sirve en el caso del toolbar donde por ejemplo viene el string completo a travez de json, donde en mi caso hago, esto: serinf.consultas.menu.Menu.menu.add(menuespecial); y menuespecial trae toda la informacion, claro que de esta forma no me funcionan los handler, si bien el tema ya lo he resuelto es posible que me ahorre bastante codigo si es posible de hacer con lo que mencionas.... Atte.- Marcelo.-
0
na mala practica, no encuentro casos donde se tenga que tomar dichas practicas, los lenguajes no se deben mezclar, y utilizar json para crear componentes desde el server evita que la aplicación sea confiable y facil de mantener. Si se pudiera suguiero que se evite dicha practica. "Buenas reglas ayudar a mantener alta la calidad de nuestros programas"
0
utiliza la funcion de recorrido del preorder que publique pare hacerlo con todos los elementos del json
0
Bien, tengo este problema, quiero crear un componente propio, que hereda de la clase BoxComponent pero..¿Cómo logro agregarle atributos que sean otros componentes, como Ext.Window o Ext.form.HtmlEditor?
0
Hola tierrarara, soy muy muy nueva en esto de ExtJS. Estoy realizando un proyecto en el que absolutamente todo lo que voy a realizar va a construirse de forma dinámica, es decir, todas las ventanas, vistas, layouts, grids, botones, etc... van a ser cargados desde una base de datos MySQL. Del lado del servidor estoy utilizando Java. Actualmente tengo problemas con las propiedades 'scope' y 'handler' de un botón que se encuentra en un formulario. He intentado utilizar la función 'eval' pero me funciona la primera vez que la ejecuto, las siguientes veces deja de funcionar. Exactamente, lo que tengo es 'scope: this' y 'handler: this.close'. Es muy simple, pero supongo que a medida que la aplicación vaya complicándose, voy a tener este problema más a menudo. He estado viendo que tu has tenido el mismo problema y (supongo) lo has resuelto. Me gustaría que me proporcionaras algún código de ejemplo para que vaya empezando y me guíe un poco, porque estoy muy muy perdida. Gracias y un saludo, Schere!

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.