Blog

Material de apoyo

Para poder continuar necesitamos descargar el material de apoyo. Recuerda que este tutorial pertenece a la parte de formularios, y al final del tutorial agregaremos nuestro ComboBox al formulario pero para evitar algunas confusiones haremos este tutorial en un archivo diferente.

Empaquetando el tutorial.

Procedemos a empaquetar nuestro código.

Ext.ns('com.quizzpot.tutorial');

Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';

com.quizzpot.tutorial. ComboBoxTutorial= {
	init: function(){
		//aqui va el codigo del tutorial
       }
}
Ext.onReady(com.quizzpot.tutorial. ComboBoxTutorial.init,com.quizzpot.tutorial. ComboBoxTutorial);

Ventana

A continuación vamos a crear una ventana que alojará nuestros diferentes tipos de ComboBox. Esta ventana nos sirve para visualizar nuestros distintos ComboBoxes que crearemos en este tutorial.

var win=new Ext.Window({
	title: 'ComboBox example',
	bodyStyle:'padding: 10px',		//alejamos los componentes de los bordes
	width:400,
	height:360,
	layout:'form'					//tipo de organización de los componentes
});
win.show();

Del código anterior podemos resaltar la propiedad “layout:’form’“, que para una ventana, el layout por defecto es el “fit“, por lo tanto sobre escribimos la propiedad para mostrar los componentes distribuidos como un formulario.

ComboBox Local

Una vez creada nuestra ventana ahora vamos a crear nuestros ComboBoxes; lo primero que necesitamos son los datos que se cargarán en nuestro ComboBox, la manera más simple de cargar datos en nuestro ComboBox es mediante el uso de un arreglo de datos.

var data=['Code Igniter','Cake Php','Symfony','Zend'];

var comboLocal =new Ext.form.ComboBox({
	fieldLabel:'Frameworks PHP',
	name:'cmb-data',
	forceSelection:true,
	store:data,
	emptyText:'Select a framework...',
	triggerAction: 'all',
	//hideTrigger:true,
	editable:false,
	//minChars:3
});

El código anterior genera un ComboBox, con datos correspondientes a algunos Frameworks existentes de PHP en el mercado. Vamos a ver el significado de las propiedades con las que configuramos nuestro ComboBox:

forceSelection: esta opción obliga al usuario a seleccionar un valor del combo, esto es independiente del tipo de validación allowBlank, que discutiremos en un tema posterior.
store: es la fuente de datos que nuestro combo mostrará, ya hemos hablado sobre este componente.
emptyText: es el texto que se muestra cuando en nuestro combo no se ha seleccionado nada.
triggerAction: esta opción le indica al combo que siempre muestre todos los datos de su store, cuando utilizamos un store remoto aquí le pondríamos el query que se mandaría a nuestra fuente de datos remota.
editable: el combo no puede ser editado, es decir no se le puede escribir algún valor.
hideTrigger: poniendo esta propiedad en true hacemos que el combo aparezca sin el iconito de la flecha hacia abajo (“disparador”).
minChars: nos indica cuantos caracteres debemos de escribir antes de que el combo empiece a mostrar información, en nuestro caso debemos comentar la propiedad editable y no comentar la propiedad minChars para ver su funcionalidad.

Ahora lo agregamos a nuestra ventana:

var win=new Ext.Window({
	bodyStyle:'padding: 10px',//alejamos los componentes de los bordes
	width:400,
	height:360,
	items: comboLocal, //agregamos el combo a la ventana
	layout:'form'		//tipo de organización de los componentes
});
win.show();

ComboBox Remoto

Ahora vamos a crear un combo que cargaremos con datos de manera remota utilizando Ajax. En esta ocasión usaremos PHP, pero como ya sabemos podemos utilizar cualquier otro lenguaje servidor.

En el ComboBox remoto utilizaremos para nuestra fuente de datos un store de tipo JSON, este componente no se va a detallar debido a que en un tutorial anterior se habló sobre dicho componente.

El código JS queda de la siguiente manera:

//se crea el store
var store= new Ext.data.JsonStore({
		url:'combo.php',
		root: 'data',
		totalProperty: 'num',
		fields: [
			{name:'name', type: 'string'},
			{name:'desc', type: 'string'},
			{name:'logo', type: 'string'},
		]
});

//se crea el combo asignandole el store
var comboRemote=new Ext.form.ComboBox({
	fieldLabel:'Data Base',
	name:'cmb-DBs',
	forceSelection: true,
	store: store, //asignandole el store
	emptyText:'pick one DB...',
	triggerAction: 'all',
	editable:false,
	displayField:'name',
        valueField: 'name'
});

Como podemos observar en las propiedades de nuestro combo le agregamos la propiedad displayField, con esta propiedad le decimos al ComboBox que información mostrar, en este caso nos va a mostrar solo los datos ‘name’ y utilizando la propiedad “valueField” le especificamos cual campo del store utilizar como “value”, puede ser un ID numérico pero en este caso utilizamos el nombre.

Cuando usamos un store remoto podemos utilizar paginación con la propiedad ‘pageSize’, esta propiedad nos permite configurar el número de datos que queremos mostrar en nuestro combo.

Por último es necesario agregar el combo que acabamos de crear a la ventana, de la siguiente manera:

var win=new Ext.Window({
	title: 'ComboBox example',
	bodyStyle:'padding: 10px',		//alejamos los componentes de los bordes
	width:400,
	height:360,
	items: [comboLocal,comboRemote],//se agrega el combo remoto
	layout:'form'					//tipo de organización de los componentes
});
win.show();

Mediante código PHP vamos a exponer la información que mostrará el combo, esta información puede salir de una base de datos, o un servicio web, para poner las cosas simples y entendibles la información esta “hardcode” en arreglos.

<?php
	$dataDB = array(
				array(
					"name"=>"MySQL",
					"desc"=>"The world's most popular open source database",
					"logo"=>"mysql.png"
				),
				array(
					"name"=>"PostgreSQL",
					"desc"=>"The world's advanced open source database",
					"logo"=>"postgresql.png"
				),
				array(
					"name"=>"Oracle",
					"desc"=>"The world's largest enterprise software company",
					"logo"=>"oracle.png"
				),
	);

	$o = array(
			"num"=>count($dataDB),
			"data"=>$dataDB
		);
	echo json_encode($o);
?>

Nótese que se han definidos los campos que el JsonStore acepta, además mediante la función json_decode se esta generando el JSON a partir de un arreglo de PHP.

Datos con formato

Muy bien ahora vamos a darle formato a nuestra información, ocuparemos la información de nuestro combo remoto, así que empecemos. Vamos a crear un nuevo ComboBox que se cargará con los mismos datos que nos proporciona el PHP, ocupando el mismo store del combo anterior.

Para darle formato a nuestro ComboBox ocupamos una plantilla, así que se la vamos a asignar a nuestro nuevo combo mediante una de sus propiedades (“tpl” de “template”). La plantilla está escrita en HTML con un poco de CSS para que la información se presente de una manera más detallada.

var comboRemoteTpl = new Ext.form.ComboBox({
	fieldLabel:'Data Base',
	name:'cmb-Tpl',
	forceSelection:true,
	store:store,
	emptyText:'pick one DB...',
	triggerAction: 'all',
	mode:'remote',
	itemSelector: 'div.search-item',
	tpl: new Ext.XTemplate('<tpl for="."><div class="search-item" style="background-image:url({logo})"><div class="name">{name}</div><div class="desc">{desc}</div></div></tpl>'),
	displayField:'name'
});

Las propiedades que aparecen ahora son:
tpl: le asigna un plantilla a mostrar para cada dato del combo, la plantilla que se crea es una cadena de HTML y con algunos estilos y clases de CSS, en próximos temas se dedicará un tutorial completo para analizar el funcionamiento del objeto “Ext.XTemplate“, por ahora solo es importante mencionar que mediante un ciclo se recorre todos los registros del store y va generando la lista de opciones a presentar al usuario.
itemSelector: esta propiedad nos indica cual va a ser la propiedad del DOM que dispara al evento select de nuestro combo.

Hasta ahora hemos modificado el markup o HTML de la lista desplegable del combo, lo que falta es darle los estilos necesarios de la siguiente manera:

	.search-item{
		border:1px solid #fff;
		padding:3px;
		background-position:right bottom;
		background-repeat:no-repeat;
	}
	.desc{
		padding-right:10px;
	}
	.name{
		font-size:16px !important;
		color:#000022;
	}

Una variación del ComboBox

Existe un componente en ExtJs que es una variación del ComboBox este componente se llama TimeField y sirve para mostrar valores respectivos al tiempo. La mayoría de sus propiedades son las mismas que el ComboBox.

var timeField=new Ext.form.TimeField({
       	fieldLabel: 'Time Field',
       minValue: '4:00',
       maxValue: '23:59',
       increment: 15,
       format:'H:i',
       name:'cb-time'
});

Como podemos ver sin mayor complicación hemos creado un nuevo ComboBox que nos muestra datos en formatos de tiempo.

Expliquemos algunas de sus propiedades.
minValue: es el valor mínimo que va a mostrar nuestro campo.
maxValue: el valor máximo que mostrará.
increment: el tamaño del incremento de los valores de nuestro campo.
format: el formato en el que se mostrará nuestros valores de tiempo.

Conclusiones

El día de hoy hemos visto un componente muy completo llamado ComboBox, este componente tiene muchos diferente tipos de configuraciones que lo hacen un componente muy recurrido en todo tipo de aplicaciones con Ext JS.

Para poder ver más de las bondades de este componente no olviden consultar el API de ExtJS.

Si tienes alguna sugerencia no olvides dejar un comentario o inscríbete en el Foro para aclarar tus dudas.