Este tutorial se basa en ExtJS 6.0.0.

Comprendiendo el Layout Border

El layout border es una herramianta fundamental en ExtJS para estructurar interfaces. Divide el área de visualización en cinco regiones principales: norte (superior), sur (inferior), oeste (izquierda), este (derecha) y centro. A continuación, se presenta un ejemplo básico:

Ext.define('MiApp.vista.PanelPrincipal', {
   extend: 'Ext.panel.Panel',
   xtype: 'panel-principal',
   referenceHolder: true,
   layout: 'border',
   defaults: {
       collapsible: true,
       split: true
   },
   items: [
       {
           region: 'north',
           bind: { html: 'Sección Superior' }
       },
       {
           region: 'south',
           bind: { html: 'Sección Inferior' }
       },
       {
           reference: 'panelIzquierdoRef',
           region: 'west',
           width: 200,
           bind: { html: 'Panel Izquierdo' }
       },
       {
           region: 'east',
           width: 200,
           bind: { html: 'Panel Derecho' }
       },
       {
           reference: 'panelCentralRef',
           region: 'center',
           bind: { html: 'Contenido Principal' }
       }
   ]
});
   

Desarrollo de la Sección Norte (Cabecera)

Esta área se utiliza comúnmente para el nombre del sistema, información del usuario o controles como botones de cierre de sesión y barras de búsqueda. Aquí, incluiremos un título simple.

1. Integración del Componente de Cabecera

Modificaremos el panel principal para incorporra un nuevo componente cabecera-superior en la región norte:

{
   reference: 'cabeceraSuperiorRef',
   xtype: 'cabecera-superior',
   region: 'north',
   collapsible: false,
   split: false,
   height: 50
}
   

2. Definición del Componente cabecera-superior

Este componente será una barra de herramientas con etiquetas:

Ext.define('MiApp.vista.componentes.CabeceraSuperior', {
   extend: 'Ext.toolbar.Toolbar',
   xtype: 'cabecera-superior',
   style: 'background-color: #35baf6; color: #fff;',
   items: [
       {
           xtype: 'label',
           bind: { text: 'Mi Aplicación ExtJS' },
           style: 'font-size: 20px; font-weight: bold;'
       },
       '->', // Espaciador flexible
       {
           xtype: 'label',
           bind: { text: 'Usuario: Invitado' }
       }
   ]
});
   

Implementación de la Sección Oeste (Navegación Lateral)

Esta sección contendrá un árbol de navegación que se cargará desde un almacén de datos.

1. Integración del Componente de Navegación Lateral

Actualizamos el panel principal para incluir un componente navegacion-izquierda en la región oeste:

{
   reference: 'navegacionIzquierdaRef',
   xtype: 'navegacion-izquierda',
   region: 'west',
   width: 220
}
   

2. Definición del Componente navegacion-izquierda

Este será un panel de árbol que utiliza un almacén específico:

Ext.define('MiApp.vista.componentes.NavegacionIzquierda', {
   extend: 'Ext.tree.Panel',
   xtype: 'navegacion-izquierda',
   title: 'Menú de Navegación',
   lines: false,
   rootVisible: false,
   store: Ext.create('MiApp.store.almacenes.NavegacionIzquierdaStore', {
       storeId: 'navegacionIzquierdaStoreId'
   })
});
   

3. Definición del Almacén NavegacionIzquierdaStore

Este almacén utilizará una conexión AJAX para cargar datos desde un archivo JSON.

Ext.define('MiApp.store.almacenes.NavegacionIzquierdaStore', {
   extend: 'Ext.data.TreeStore',
   alias: 'store.navegacionIzquierdaStore',
   proxy: {
       type: 'ajax',
       url: 'recursos/datosNavegacion.json' // Ruta al archivo de datos
   },
   root: {
       expanded: true
   },
   autoLoad: true
});
   

4. Estructura del Archivo de Datos (datosNavegacion.json)

Aquí se simulan los datos que normalmente proporcionaría el backend. Este JSON define la estructura del árbol de navegación:

[
 {
   "text": "Componentes",
   "id": "componentes",
   "expanded": true,
   "children": [
     {
       "id": "basicos",
       "text": "Básicos",
       "leaf": true
     },
     {
       "id": "avanzados",
       "text": "Avanzados",
       "leaf": true
     }
   ]
 },
 {
   "text": "Estructuras",
   "id": "estructuras",
   "expanded": true,
   "children": [
     {
       "id": "arbol",
       "text": "Árbol",
       "leaf": true
     },
     {
       "id": "ventanas",
       "text": "Ventanas",
       "leaf": true
     }
   ]
 }
]
   

Hasta este punto, la estructura visual de la barra lateral está definida. La próxima entrega abordará cómo hacer que la navegación sea funcional, permitiendo la redirección entre páginas.