Hoy vamos a ver cómo podemos crear una lista desplegable con opciones para elegir. Este componente suele ser muy habitual en las apps sobre todo para elegir localidades, fechas, etc.

  1. El primer paso como siempre es tener un proyecto ya creado o crear uno.
  2. A continuación añadimos el código necesario para crear nuestra lista desplegable con las opciones que queremos. Éste sería el código:

Como podemos observar en el código, la lista desplegable está dividida en varias partes:

  • Picker: Es el elemento principal. En este aparatado indicamos las propiedades que queremos que tenga.
  • PickerColumn: Con este componente indicamos que vamos a añadir una columna. Este quiere decir que podemos hacer una lista desplegable de varias columnas juntas. Esto es más habitual cuando queremos que el usuario elija fecha y hora.
  • PickerRow: Este parámetro indica cada fila que tendrá la lista desplegable. Con el atributo “title” mostraremos el texto que tiene que aparecer en la fila.
<Alloy>
	<Window class="container">
		<Picker id="selector" selectionIndicator="true">
            <PickerColumn id="columna1">
                <PickerRow title="Opción 1" />
                <PickerRow title="Opción 2" />
                <PickerRow title="Opción 3" />
                <PickerRow title="Opción 4" />
            </PickerColumn>          
        </Picker>
	</Window>
</Alloy>

Además de estos atributos podemos añadir más para modificar su apariencia a nuestro gusto. En este enlace se indican todas las propiedades y eventos.

El código que acabamos de hacer es una forma sencilla y estática de crear una lista desplegable pero, ¿cómo podríamos hacerlo de manera que se rellene automáticamente? En el archivo .js que hace referencia a la vista donde hemos añadido nuestra lista, en mi caso index.js, he incluido el siguiente código que simplemente añade una fila extra al objeto.

var fila = Ti.UI.createPickerRow({title: "fila nueva"}); //Definimos uan variable que será la fila nueva y la creamos indicando el texto que mostrará
$.selector.add(fila); //añadimos la fila a la lista desplegable con id=selector.

Así queda el resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies