jQuery : Diseño De Componentes Usando Ext JS
Ext JS es un framework de JavaScript que ofrece una gran cantidad de widgets de interfaz de usuario cross-browser (o sea que es soportado por varios navegadores y es side-client o sea del lado del cliente). El núcleo de Ext JS es el diseño de componentes integrados, los cuales se pueden ampliar fácilmente para satisfacer nuestras necesidades.
Preparándonos
Para Nuestro Ejemplo descargaremos la versión de prueba de este framework:
[img url="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_1.png" width="600" height="600" rel="Eligiendo La Versión No Paga" src="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_1.png?attredirects=0&d=1"/] [img url="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_2.png" width="600" height="480" rel="Eligiendo Ext JS" src="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_2.png"/] [img url="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_3.png" width="600" height="480" rel="Rellenando nuestros Datos" src="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_3.png"/] [img url="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_4.png" width="600" height="480" rel="Clicando en Descarga" src="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_4.png"/] [img url="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_5.png" width="600" height="480" rel="Nos enviaran un mensaje a nuestro correo electrónico" src="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_5.png"/] [img url="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_6.png" width="600" height="480" rel="Realizando la descarga de 116 MB aproximadamente" src="https://sites.google.com/site/provasfatec/imagenes/descarga_ex_js_6.png"/]
Luego de la descarga, estaremos listos para construir un diseño clásico de Ext JS con dos columnas y un acordeón.
También podríamos preparar un simple archivo HTML ajax/center-content.html para probar la funcionalidad de Ajax:
...
<body>
<p>Center Content</p>
</body>
...
Manos Al Código
- Primer Paso: Estamos Listos para la codificación!. En primer lugar, incluiremos los archivos obligatorios como: los archivos de biblioteca CSS y Ext JS.
<link rel="stylesheet" href="css/ext-all.css" />
<script src="js/ext-base.js"></script>
<script src="js/ext-all.js"></script>
- Segundo Paso: Continuaremos con la función onReady, que ejecutará nuestro script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creando Componentes con Ext JS</title>
<link rel="stylesheet" type="text/css" href="css/ext-base.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext .onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:'true',
width:'200',
margins:'5 0 5 5',
cmargins:'5 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items:[{
html:'Navigation content',
title:'Navigation',
},{
title:'settings',
html:'Settings Content'
}]
},{
region:'center',
margins:'5 5 5 0',
layout:'column',
autoLoad:{
url: 'ajax/center-content.html',
method:'GET'
}
}]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="js/examples.js"></script><!-- Ejemplos -->
</body>
</html>
- Nuestro resultado se parece a lo siguiente:
¿Cómo esto trabaja?
- Primero: Debemos saber que Ext JS está construido para facilitar la vida de los desarrolladores. Como se puede ver en el código, hemos creado un diseño con un objeto JavaScript simple. Tenemos un "Viewport" con dos artículos. Uno está situado a la izquierda (región: West 'Oeste') y el segundo a la derecha (región: East 'Este'). No tenemos que cuidar el CSS en este caso. Todo es manejado directamente por Ext JS a través de nuestras variables como ancho (width), márgenes (margins), cmargins, etc. La propiedad del layout es realmente poderosa. El diseño interior en el lado West 'oeste' es un acordeón con los elementos de navegación y su configuración. En la columna central, podemos ver el contenido 'Center Content' que mediante la propiedad html hemos cargado.
Infelizmente este framework tiene una licencia de 30 días. Si bien es cierto vale la pena mismo comprarla, ya que es muy poderosa y enteramente interactiva; depende ya de su poder adquisitivo y sus ganas de seguir con ella que le haran tomar una decisión. Espero haber sido exacto en mi explicación con este ejemplo básico de este poderoso framework. Buena Suerte!
