amigos ya solucione! lo que hice fue quitar esta porcion de codigo var idQuestion = { xtype : "hidden", name : "idQuestion", value : question.idQuestion }; y añadir "corchetes" al "question.idQuestion", ademas de quitar el "url: *.php" del "finish" y agregarlo en el "form". La solucion resulto ser mas sencilla de lo que esperaba, pero cuando no se conoce mucho pues tambien estrellandose se aprende :-D con ello ya obtengo la respuesta seleccionada junto con el indice como id de la pregunta. Gracias Totales... pero aun me queda un detalle! resulta que con eso que hice el firebug me arroja el siguiente msj: uncaught exception: Error parsing selector, parsing failed at "]" como corrijo eso? ya que no quiero dejar el código con detallitos ni con esos msj rojos :-? JS final Ext.ns("com.quizzpot.tutorial"); com.quizzpot.tutorial.Wizard = { index:0, init : function(){ Ext.Ajax.request({ url : "php/questions.php", scope : this, success: function(response){ var survey = Ext.decode(response.responseText); this.form = new Ext.FormPanel({ layout : "card", url : "php.php", border : false, activeItem : this.index, items : [this.creo(survey)] }); //creas los botones como propiedades el objeto Wizard, de esta manera se podrán usar en otros métodos del mismo objeto Wizard this.backBtn = new Ext.Button({text : "Back",handler : this.back,scope : this,hidden:true}); this.nextBtn = new Ext.Button({text : "Next",handler : this.next,scope : this}); this.finishBtn = new Ext.Button({text : "Finish", hidden : true, handler:this.finish,scope:this}); this.win = new Ext.Window({ title : "Autoevaluación de Competencias Gerenciales", layout : "fit", width : 800, height : 450, resizable : false, // bodyCssClass: "wizard-image", //esta clase CSS le pone la imagen y el margen adecuado, la clase esta definida en el HTML fbar : [this.backBtn,this.nextBtn,this.finishBtn], items : [this.form] }); this.win.show(); } }); }, creo : function(survey){ var cuestionario = []; Ext.each(survey.cuestionario,function(question,index){ var radios = []; var grupo= question.grupo; Ext.each(question.answers,function(answer){ radios.push({boxLabel: answer.text, name:"respuesta["+question.idQuestion+"]", inputValue: answer.idAnswer}); }); var options = new Ext.form.RadioGroup({ hideLabel : true, bodyStyle : "font-size:18px;padding:20px;position:relative;", fieldLabel : "Survey", columns : 1, items : [radios] }); var question = { xtype : "panel", border : false, bodyStyle : "padding-bottom:10px;font-size:20px;", html : ""+question.pregunta+"" }; var tem=new Ext.FormPanel({ title : ""+grupo+"", bodyStyle : "padding: 10px;font-size:12px;", border : false, items : [question,options], tbar : [], html:"

Pregunta Nº "+(index+1)+"

"+ "

bla bla bla...

" }) cuestionario.push(tem); }); return cuestionario; }, next: function(){ this.backBtn.show(); if(this.index < 2){ this.index++; var cardlayout = this.form.getLayout(); cardlayout.setActiveItem(this.index); if(this.index == 2){ //si esta en el ultima carta this.nextBtn.hide(); this.finishBtn.show(); } } }, back : function(){ if(this.index>0){ this.index--; var cardlayout = this.form.getLayout(); cardlayout.setActiveItem(this.index); } if(this.index == 0){ //si esta en la primera carta this.backBtn.hide(); }else{ this.finishBtn.hide(); this.nextBtn.show(); } }, finish : function(){ this.form.getForm().submit({ scope : this, success : this.msg, failure : this.msg }); }, msg : function(){ Ext.Msg.alert("Titulo","Mensaje."); this.win.close(); } } Ext.onReady(com.quizzpot.tutorial.Wizard.init,com.quizzpot.tutorial.Wizard); Saludos

amigos les comento poco a poco he visto algunos detalles o fallas de mi parte: quite la validacion y el getValue() de la función finish; finish : function(){ this.form.getForm().submit({ scope : this, success : this.msg, failure : this.msg }); } ahora si envia el formulario con todos los "idQuestion" pero las respuestas llamada "respuesta" me envia una sola, en este caso el ultimo card que se selecciono! lo que hice fue agregar question.idQuestion al lado de "respuesta" para diferenciar y eso si funciono Ext.each(question.answers,function(answer){ radios.push({boxLabel: answer.text, name:"respuesta"+question.idQuestion, inputValue: answer.idAnswer}); }); de esa manera si envia cuando hago el submit, pero no es lo que quiero porque entonces tienen nombres distintos(ejm.:respuesta1,respuesta4,respuesta8,...) y se supone que yo lo que quiero es un arreglo "respuesta[ ]" con todo el contenido seleccionado, o sea que ya envio los "idQuestion" ahora solo me falta enviar los "answer.idAnswer" seleccionados Que puedo o debo hacer? Saludos

Hola Crysfel y comunidad les cuento mi experiencia: logre insertar los RadioGroup dentro de los CardLayout gracias a uds... sus sugerencias y los tuto excelentes de quizzpot , lo que hize fue unir ambos ejemplos y consegui lo siguiente PHP $row2["id_answer"], "text" => $row2["answer"] )); } array_push($cuestionario,array( 'pregunta' => $row["question"], 'idQuestion' => $row["id"], 'grupo' => $row["grupo"], 'answers' => $answers )); } echo json_encode(array( "success" => true, "cuestionario" => $cuestionario )); ?> JS Ext.ns("com.quizzpot.tutorial"); com.quizzpot.tutorial.Wizard = { init : function(){ Ext.Ajax.request({ url : "php/questions.php", scope : this, success: function(response){ var survey = Ext.decode(response.responseText); this.form = new Ext.FormPanel({ layout : "card", border : false, activeItem : this.index, items : [this.creo(survey)] }); //creas los botones como propiedades el objeto Wizard, de esta manera se podrán usar en otros métodos del mismo objeto Wizard ;) this.backBtn = new Ext.Button({text : "Back",handler : this.back,scope : this,hidden:true}); this.nextBtn = new Ext.Button({text : "Next",handler : this.next,scope : this}); this.finishBtn = new Ext.Button({text : "Finish", hidden : true, handler:this.finish,scope:this}); this.win = new Ext.Window({ title : "Autoevaluación de Competencias Gerenciales", layout : "fit", width : 800, height : 450, resizable : false, // bodyCssClass: "wizard-image", //esta clase CSS le pone la imagen y el margen adecuado, la clase esta definida en el HTML fbar : [this.backBtn,this.nextBtn,this.finishBtn], items : [this.form] }); this.win.show(); } }); }, creo : function(survey){ var cuestionario = []; Ext.each(survey.cuestionario,function(question,index){ var radios = []; var grupo= question.grupo; Ext.each(question.answers,function(answer){ radios.push({boxLabel: answer.text, name: "respuesta", inputValue: answer.idAnswer}); }); var options = new Ext.form.RadioGroup({ hideLabel : true, bodyStyle : "font-size:18px;padding:20px;position:relative;", fieldLabel : "Survey", columns : 1, items : [radios] }); var question = { xtype : "panel", border : false, bodyStyle : "padding-bottom:10px;font-size:20px;", html : ""+question.pregunta+"" }; var idQuestion = { xtype : "hidden", name : "idQuestion", value : question.idQuestion }; var tem=new Ext.FormPanel({ title : ""+grupo+"", // url : "php/submit.php", bodyStyle : "padding: 10px;font-size:12px;", border : false, items : [question,options,idQuestion], tbar : [], html:"

Pregunta Nº "+(index+1)+"

"+ "

Cada uno de los siguientes enunciados describe un nivel de seguimiento en una dimensión de una competencia gerencial.

"+ "

Según usted, ¿Qué tan bien lo describe cada enunciado?

"+ "

En este formulario se le hacen 95 preguntas de características representativas de gerentes eficientes y experimentados.

"+ "

Seleccione por cada una la característica que corresponda el anunciado del nivel de segumiento que se aplique mejor usted.

"+ "

Es importante presentar una autovaloración precisa para comprender sus competencias actuales y lo que necesita hacer para desarrollar más.

"+ "

Verifique que en la parte posterior a este formulario, sobre la columna de Puntos, se va colocando el número de acuerdo a su selección,"+ "durante esta evaluación usted puede cambiar su respuesta, navegando a través de los botones inferiores,"+ "el no completar esta evaluación afecta considerablemente sus resultados.

" }) cuestionario.push(tem); }); return cuestionario; }, index:0, next: function(){ this.backBtn.show(); if(this.index < 2){ this.index++; var cardlayout = this.form.getLayout(); cardlayout.setActiveItem(this.index); if(this.index == 2){ //si esta en el ultima carta this.nextBtn.hide(); this.finishBtn.show(); } } }, back : function(){ if(this.index>0){ this.index--; var cardlayout = this.form.getLayout(); cardlayout.setActiveItem(this.index); } if(this.index == 0){ //si esta en la primera carta this.backBtn.hide(); }else{ this.finishBtn.hide(); this.nextBtn.show(); } }, /* ¿? */ finish : function(){ var id = this.form.getForm().getValues().idAnswer; if(!Ext.isEmpty(id)){ this.form.getForm().submit({ url : "#", scope : this, success : this.msg, failure : this.msg }); } }, msg : function(){ Ext.Msg.alert("Alert","Your connection has been created succesfully."); this.win.close(); } } Ext.onReady(com.quizzpot.tutorial.Wizard.init,com.quizzpot.tutorial.Wizard); con eso ya funciona bien! por eso nuevamente mis reiteradas gracias ^:)^ pero amigos les soy sincero la verdad no tengo idea como voy a guardar o a enviar el formulario, ni como capturo cada selección de los radio's? en fin, la cuestión es que puedo o debo hacer en la función "finish" si por ejemplo son 10 ó mas preguntas, para enviar sus respectivas respuestas(answers) a la bd? Saludos

Saludos Comunidad! ya revise el ejemplo y esta excelente, ahora mi duda amigo Crasho es: lograste acoplarle una o mas preguntas al cuestionario, encuesta o test ?? o alguien podria aportar ideas, sugerencias... sobre como complementar el ejemplo paginando mas preguntas? de antemano muy agradecido \m/

podrias usar cardlayout, asi podrias poner en cada card un serie de preguntas las cuales pueden tener radio button o simples preguntas con sus respectivos check.

jejej Gracias y disculpa amigo pero algún posible ejemplo? soy muy novato aun... primera vez que leo sobre el cardlayout pero se oye muy interesante me gustaría aprender

Mira este enlace dale click en donde dice card (wizard) http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html Y en este otro puedes descargar el cardlayout, en realidad no es muy complicado usar el cardlayout. http://www.siteartwork.de/cardlayout/

Aquí tienes un tutorial sobre el card layout y como puedes cambiar entre cartas. http://www.quizzpot.com/2010/10/creando-un-wizard/ Saludos

Perfecto Gracias! complementare ambos ejemplos y luego os contare mi buena experiencia o los errores u horrores :-D espero no los haya, de verdad muy agradecido amigos... Saludos

Que casualidad, la próxima semana publicaremos un tutorial exactamente como lo que pides, además de que mostrará los resultados en un PieChar y todo desde una base de datos MySQL, justo ahora esta en proceso de revisión ortográfica y gramática <!-- s:D --><!-- s:D --> . Yo creo que lo publicaremos por el día miercoles. Si no puedes esperar hasta la próxima semana te recomiendo darle una revisada al componente "RadioGroup". Saludos

Hola stock, gracias. Checaré lo que me dices, aunque estaré pendiente también de su publicación. Gracias

Hola Stock publicaron el tutorial que comentaste?? Saludos

no todavía, esta planeado para este martes!! saludos!!

Aquí te dejo un tutorial donde puedes ver un ejemplo de componentes creados dinámicamente, el mismo concepto aplica para cualquier componentes (Grids, tabs, botones, etc... ) <!-- m -->http://www.quizzpot.com/2010/10/una-enc ... inamica-3/<!-- m --> Saludos

Hola Stock, revisé el ejemplo de la encuesta, en el ejemplo pones dos preguntas en las BD, sin embargo sólo muestras una al crear la forma, qué haría falta por hacer en el caso de que la encuesta tuviera más de una pregunta? tendría que llamar al ajax pregunta por pregunta? hay alguna manera de que el ajax te devuelva todas las preguntas con sus respuestas y se arme la forma? Saludos y gracias