Este es un ejemplo simple para mostrar cómo crear una ventana en la ExtJs4.
La ventana gráfica se representa en el cuerpo del documento, y automáticamente se los tamaños con el tamaño de la ventana del navegador y gestiona el cambio de tamaño de la ventana. No sólo puede ser una ventana gráfica creada en una página.
La ventana gráfica no permiten el desplazamiento, por lo que los paneles de niños dentro de la ventana debe proporcionar para el desplazamiento si es necesario usando la configuración de desplazamiento automático.
A diferencia del componente de panel de Ext JS, Viewport no tiene una opción tbar. Por lo tanto, no se puede conectar un componente de la barra de herramientas en la ventana gráfica. La mejor solución es convertir a la región norte de la aplicación a una barra de herramientas.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> ExtJS4 Viewport Ejemplo </ title> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"> </ script> <script> Ext. . aplicación ({nombre: 'Vista del puerto', puesta en marcha: function () {Ext.create ('Ext.container.Viewport', {layout: 'border', items: [{región: "Norte", en la frontera: false, altura: 24, tbar: [{text: 'Nuevo', del menú: [{text: 'Crear Nuevo X', handler: function () {/ / agregar un controlador a "Agregar Nuevo X" Ext.Msg.alert elemento de menú ('Alerta', 'Agregar nuevo elemento de X');}}, {text: 'Crear Nuevo Y'}]}, {text: 'Actualizar'}, {text: 'Herramientas'}, '->', {texto: 'Opciones', iconCls: 'options_icon', del menú: [{text: 'Información del Usuario'}, {text: 'Configuración'}, {text: 'Theme Switch'}]}, {text: 'Ayuda' }, '-', {text: 'Salir'}]}, {región: 'Oeste', / / abatible: true, split: verdadero título,: 'Navegación', anchura: 150 / / podría utilizar un TreePanel o AccordionLayout para los elementos de navegación}, {región: 'sur', altura: 26, / * bbar: [Bar / / Abajo {xtype: 'botón', text: "Botón 1"}] * / dockedItems: [{xtype: 'barra de herramientas ', la base de:' bottom ', items: [{xtype:' botón ', el texto: "Mostrar Advertencia & Clear', handler: function () {var = sb Ext.getCmp ('básico de estado'); sb.setStatus ({text: '¡Uy! ", iconCls:' X-Status-error ', claro: true / / auto-claro después de un intervalo de juego});}}, {xtype:' botón ', text:' Mostrar ocupado ' , controlador: function () {var = sb Ext.getCmp ('básico de estado'); / / Establecer la barra de estado para mostrar que algo es el procesamiento de: sb.showBusy ();}}, {xtype: 'botón', texto: "estado de abierto", el controlador: function () {var = sb Ext.getCmp ('básico de estado'); / / una vez completado sb.clearStatus ();}}, '-', 'Texto sin formato']} ]}, {región: 'este', title: 'Panel de Oriente ", plegables: región 150}, {:: true, split: ancho real," centro ", xtype:' TabPanel ', / / TabPanel en sí no tiene título activeTab: 0, / / Primera pestaña activa por defecto AutoScroll: true, los elementos: {. title: 'Tab por defecto', html: 'La primera pestaña \' s el contenido de otros se pueden añadir de forma dinámica "}}]});}} ); </ script> </ head> </ body> </ html> 
