Como crear un ComboBox con Ext.ux.MetaForm

enero 20, 2009 at 3:38 pm Deja un comentario

Este tema se lo dedico a una pregunta que yo mismo hice en el foro de la comunidad de extjs en español y que encontre la respuesta. La pregunta era la siguiente: Como llenar un combobox con el plugin Ext.ux.MetaForm ? y  aprovecho para decirles que el mismo se encarga de crear formularios pasandole los datos y estructura desde el server. Esto es realmente sencillo y util cuando tenemos una aplicacion que genera los formularios dinamicos a partir de una base de datos , XML o cualquier fichero de almacenamiento de datos.

Primero, para lograr un formulario debemos crear un JSON con un formato que el plugin logre interpretar y el mismo debe contener varias partes como:

  1. formConfig que se encarga de la configuracion del formulario.
  2. fields que sera el arreglo de campos.
  3. data que es el arreglo que tiene los datos con los cuales se van a mostrar los campos del formulario.

Como se que un ejemplo es mejor que mil palabras aqui les dejo como deberia quedar estructurado todo este json.

/*
Creamos la estructura del Formulario.
*/
$formConfig = array(
"labelAlign"=>"left"
,"columnCount"=>2
,"labelWidth"=>80
,"defaults"=>array(
"width"=>130
)
);
/*Los campos del formulario serian de esta manera y miren el tercer campo es un combo y el $store_total es el strore del combo.
*/
$store_total = array_merge($store_total,array('1' => 'La Habana', '2' => 'Ciego de Avila', '3' => 'CUBA'));


$fields = array(
array(
"name"=>"compName"
,"fieldLabel"=>"Company"
,"editor"=>array(
"allowBlank"=>false
)
)
,array(
"name"=>"compForm"
,"fieldLabel"=>"Legal Form"
,"editor"=>array(
"allowBlank"=>false
)
)
,array(
"name"=>"clientFrom"
,"fieldLabel"=>"Mi Combo"
,"editor"=>array(
"xtype"=>"combo",
"store"=> $store_total
)
));
/*El config agrupa todos los elementos anteriores*/
$config = array(
"success"=>true
,"metaData"=>array(
"fields"=>$fields
,"formConfig"=>$formConfig
)
,"data"=>array(
"compName"=>"My Company"
,"compForm"=>"Company Form"
)
);
/*Generamos el JSON y lo imprimimos*/
echo json_encode($config);
?>

Solo nos queda descargarnos el plugin e  incluirlo en la pagina html junto con las librerias de extjs y disfrutarlo.

saludos…

Entry filed under: ExtJS. Tags: .

Hello world! Convertir DataRow, DataTable y DataSet a Json

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Calendario

enero 2009
L M X J V S D
     
 1234
567891011
12131415161718
19202122232425
262728293031  

Most Recent Posts


A %d blogueros les gusta esto: