Sencha Touch 2.x
  • Contenidos
  • Introducción
  • Instalación
  • Nuestra primera aplicación
    • Código HTML básico de una aplicación
    • Compilar un proyecto
    • Aviso durante la carga
    • Instanciar una aplicación
    • Comprobar los resultados
    • Fichero único vs. MVC
  • Uso de Componentes y Contenedores
    • Instanciar componentes
    • Configuración de componentes
    • Identificadores y referencias
    • Array de items y el atributo xtype
    • Añadir componentes a contenedores
    • Eliminar componentes de un contenedor
    • Mostrar y ocultar componentes
    • Eventos
    • Destruir componentes
  • Layouts
    • Layout tipo hbox
    • Layout tipo vbox
    • Layout tipo card
    • Layout tipo fit
    • Docking o acoplamiento
    • Pack y align
  • Transiciones de cambio de vista
  • Componentes
    • Toolbars
    • Botones
    • TabPanel
    • Carousel
    • Diálogos
    • Formularios
  • Almacenamiento
    • Data Model
    • Data Store
    • Proxy
  • Componentes asociados a datos
    • Plantillas
    • DataViews
    • Listados
    • Formularios
  • Más información
  • Ejercicios 1
  • Ejercicios 2
  • Ejercicios 3
Powered by GitBook
On this page

Was this helpful?

  1. Layouts

Layout tipo vbox

PreviousLayout tipo hboxNextLayout tipo card

Last updated 5 years ago

Was this helpful?

El layout vbox es similar a hbox pero creando una disposición vertical en lugar de horizontal. Lo podemos visualizar como un conjunto de cajas apiladas de la siguiente forma:

El código para crear una pantalla de este tipo sería idéntico al utilizado en el ejemplo anterior pero cambiando el tipo de layout hbox por vbox:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            html: 'Fila que ocupa 1/3 del alto.',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'Fila que ocupa 2/3 del alto.',
            flex: 2
        }
    ]
});