Templates y Temas para ExtJS y Sencha Touch Bleext!
Bleextop! un desktop OpenSource para Ext4 y CodeIgniter http://bit.ly/pUwLJO
Componentes Dinamicos de Ext js
  • Vote Up0Vote Down tierrararatierrarara May 2010
    Posts: 70
    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
  • 15 Answers sorted by
  • Vote Up0Vote Down mugaldemugalde May 2010
    Posts: 70
    Sabes estoy tratando de hacer lo mismo que tu y no he logrado dar con nada, si se como hacerlo te escribo sin falta.
  • Vote Up0Vote Down tierrararatierrarara May 2010
    Posts: 70
    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
  • Vote Up0Vote Down tierrararatierrarara May 2010
    Posts: 70
    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 :P
  • Vote Up0Vote Down manduksmanduks May 2010
    Posts: 90
    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
  • Vote Up0Vote Down mugaldemugalde May 2010
    Posts: 70
    gracias por tu comentario, pero para nosotros que somos novatos, seria posible que colocaras un ejemplo basico de lo que dices...
  • Vote Up0Vote Down CrysfelCrysfel May 2010
    Posts: 897
    Yo he puesto ejemplos en el foro:

    viewtopic.php?f=6&t=116&start=0&hilit=manager

    saludos
  • Vote Up0Vote Down tierrararatierrarara May 2010
    Posts: 70
    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
  • Vote Up0Vote Down CrysfelCrysfel May 2010
    Posts: 897
    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
  • Vote Up0Vote Down tierrararatierrarara May 2010
    Posts: 70
    excelente, muy claro el ejemplo, era exactamente lo que estaba preguntando.

    buenisimo!! 20pts
  • Vote Up0Vote Down mugaldemugalde May 2010
    Posts: 70
    Agradecido Stock, es a eso a lo cual queria llegar....
  • Vote Up0Vote Down mugaldemugalde May 2010
    Posts: 70
    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.-
  • Vote Up0Vote Down manduksmanduks May 2010
    Posts: 90
    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"
  • Vote Up0Vote Down tierrararatierrarara May 2010
    Posts: 70
    utiliza la funcion de recorrido del preorder que publique pare hacerlo con todos los elementos del json
  • Vote Up0Vote Down firomero87firomero87 March 2011
    Posts: 2
    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?
  • Vote Up0Vote Down schereschere April 23
    Posts: 1
    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!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Twitter

Sign In Apply for Membership

In this Discussion

Poll

No poll attached to this discussion.