ExtJS – ComboBox opción por defecto

Author: Adrià Cidre  |  Category: EXT JS, Java Script

Quizá soy yo no he sido capaz de encontrar la solución correcta pero me parece que una cosa tan simple como tener una opción seleccionada por defecto en un desplegable, no debería ser una tarea tan y tan complicada.

Aquí tenéis el código para poder tener una opción seleccionada por defecto en un desplegable con EXTJS

{
	xtype		: 'combo',
        fieldLabel	        : 'Sexo',

	hiddenName	: 'sexo',
        name		: 'sexo',

	mode		: 'local',
        width		: 250,
	displayField     : 'name',
	valueField	        : 'id',
	store                : new Ext.data.SimpleStore({
	        id		: 0 ,
	        fields	: [  'id', 'name' ],
	        data	: [
			    [1, 'Hombre'],
			    [2, 'Mujer']
			]
	    }),
	listeners	: {
		beforerender: function(combo){
			combo.setValue(1);// El ID de la opción por defecto
		}
	},
},

Si bien es cierto que podemos ponerle un valor por defecto con la propiedad value, Nos pone como valor el nombre es decir ‘Hombre’ o ‘Mujer’ y no el ID ’1′ o ’2′.

Lo ‘único‘ que hay que hacer entonces es utilizar la propiedad ‘hiddenName‘ y poner en el listenerbeforerender‘, que se ejecuta una vez se ha cargado el store, una función que nos cargue como valor el ID que queramos.
Me ha costado encontrar como hacerlo, espero que no perdáis tanto rato como yo, si tenéis dudas preguntad :-)

ExtJS – Desplegables

Author: Adrià Cidre  |  Category: EXT JS, Java Script

Es sencillo crear un desplegable con extJS, siempre y cuando tengas claro como, hoy vamos a ver un ejemplo muy básico de como hacerlo.

Primero tenemos que crear una variable que contenga el array representativo del del contenido del desplegable.

	var misDatos = [
     [1, 'item1'],
     [2, 'item2']
	];

A continuación creamos el desplegable, y le asignamos esta variable mediante la propiedad store.

	var combo = new Ext.form.ComboBox({
    store: new Ext.data.SimpleStore({
         id:0
        ,fields:
            [
                'myId',   //numeric value is the key
                'myText' //the text value is the value
            ]
        ,data: misDatos
    })
    ,valueField:'myId'
    ,displayField:'myText'
    ,mode:'local'
    // rest of config
});

Aparentemente eso es todo, otro día veremos ejemplos más elaborados.

Aqui podéis encontrar varios ejemplos que os pueden ayudar a comprender mejor el elemento ComboBox.