Share
Hola chicos, Levi Hack con aquí. Hoy, vamos a discutir la versión cuatro de la infraestructura de JavaScript, ExtJS. Vamos a cubrir qué es, cómo instalarlo, y luego vamos a mostrar el poder de ExtJS al armar una cuadrícula de datos sólida con algunos datos de muestra que he reunido..
Este tutorial incluye un screencast disponible para miembros Tuts + Premium.
Así que comencemos repasando qué es realmente ExtJS. ExtJS, desarrollado por una empresa llamada Sencha, es un marco de JavaScript diseñado específicamente para crear aplicaciones web. La principal diferencia entre un marco de JavaScript como ExtJS y una biblioteca de JavaScript como jQuery es que ExtJS está destinado a crear aplicaciones completas, todas las herramientas que necesita se encuentran dentro del marco, mientras que jQuery está diseñado para ser colocado en un sitio existente agregar funcionalidad.
"La principal diferencia entre un marco de JavaScript como ExtJS y una biblioteca de JavaScript como jQuery es que ExtJS está destinado a crear aplicaciones completas, todas las herramientas que necesita se encuentran dentro del marco, mientras que jQuery está diseñado para ser colocado en un sitio existente para agregar funcionalidad? "
Para instalar ExtJS, primero debemos descargarlo del sitio web de Sencha. Dirígete a http://www.sencha.com/products/extjs y haz clic en el botón "Descargar" en la esquina superior derecha. En esta página, verá una sección titulada "¿Trabajar en código abierto?" seguido de un enlace para descargar ExtJS 4.0.2a - la última versión. Continúa y haz clic en ese enlace y la descarga comenzará en breve. Ahora, notará que la descarga es bastante grande, más de 30 megabytes. Esto se debe a que el archivo zip que descargó no solo contiene los archivos de la estructura de ExtJS, sino también todos los ejemplos y la documentación que encontrará en el sitio web de Sencha. Además, también contiene varias versiones del marco: una que está completamente documentada y sin comprimir para uso de desarrollo y otra que se ha minimizado y comprimido para su uso en sistemas de producción. Una vez que se descargue el archivo zip, extraiga su contenido y tome la carpeta que crea y cárguela en su sitio web, como lo he hecho aquí. Note que he cambiado el nombre de la carpeta a solo "extjs" - todo en minúsculas. Esto hará que sea más fácil de referencia más adelante.
Ahora que hemos revisado algunos antecedentes y hemos subido el Framework a nuestro sitio web, comencemos a programar. Ahora, como puede ver en los archivos del proyecto aquí a la izquierda, ya he configurado una estructura de carpetas básica para nuestra aplicación, así como una página index.html y un archivo JavaScript script.js en blanco. La página HTML es donde vamos a incluir todos los scripts necesarios que cargamos anteriormente y el archivo JavaScript es donde vamos a poner todo nuestro código de aplicación.
Comencemos por abrir el archivo index.html. Como puede ver, ya he configurado una página HTML básica utilizando el doctype HTML5. Ahora le contaré los archivos necesarios que necesitará para crear una aplicación ExtJS y cómo incluirlos..
Lo primero que querremos incluir es el archivo CSS. Sin este archivo, nuestra aplicación no se verá bien cuando se procesa.
A continuación tenemos que incluir los archivos JavaScript necesarios. El primer archivo que vamos a incluir es ext-all-debug; Esta es toda la biblioteca ExtJS, sin comprimir. En segundo lugar, queremos incluir nuestro archivo script.js. Recuerde que este es el archivo al que irá todo nuestro código de aplicación.
Ahora que hemos incluido todos los archivos necesarios, comencemos a codificar. Lo primero que queremos hacer es asegurarnos de que todo el código que escribimos se active después de que la página web haya terminado de cargarse, por lo que envolveremos todo nuestro código en una llamada a la función Ext.onReady. Agregue lo siguiente al archivo script.js:
Ext.onReady (function () );
Ahora, hay dos cosas que quiero señalar sobre este fragmento de código: en primer lugar, estamos pasando una función completa a una llamada de método (onReady). Esto es lo que se llama una devolución de llamada: una función que se llama tan pronto como se completa otra tarea, en nuestro caso, la página terminó de cargarse. En segundo lugar, notará que inicié esta llamada de método con "Ext". Esto se denomina espacio de nombres. Un espacio de nombres es una forma de contener variables y métodos en contenedores separados para evitar cosas como la colisión de variables. ExtJS se basa en gran medida en los espacios de nombres para funcionar correctamente. De hecho, cada llamada a un método en ExtJS está contenida en, como mínimo, un espacio de nombres: Ext. Estarás expuesto a ejemplos más complejos de uso de espacio de nombres a medida que avanzamos en este tutorial.
Bien, ahora que hemos configurado nuestro método onReady, declaremos nuestro DataGrid. Actualice su archivo script.js con lo siguiente:
Accentsconagua
Ext.onReady (function () Ext.create ('Ext.grid.Panel', );); Aquí estamos declarando una nueva instancia, o copia, de una cuadrícula de datos ExtJS pasando el espacio de nombres completo 'Ext.grid.Panel' al método "crear". Ahora, también notará las llaves vacías que pasé. En JavaScript, un par de llaves vacías significa un objeto vacío. En ExtJS, cuando crea una cuadrícula de datos (o cualquier otro objeto) utilizando el método "crear", debe pasar la configuración o, en términos de ExtJS, la configuración para ese objeto pasando un objeto JavaScript con propiedades que representan el Propiedades de la grilla que estamos creando. Ahora, si eso suena un poco confuso, tendrá más sentido a medida que avance y configure la cuadrícula de datos. Continuemos y hagamos eso ahora:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', ));) Como puede ver, hemos agregado una propiedad llamada "tienda" a nuestra cuadrícula de datos y le asignamos una instancia de un nuevo objeto: una tienda. En ExtJS, el propósito de una cuadrícula de datos es mostrar datos, y esos datos deben provenir de algún lugar: una tienda.
Una tienda es, en su mayor parte, sólo una colección de registros. Un ejemplo más real de esto podría ser la aplicación de contacto en su teléfono inteligente. La parte de la aplicación que te permite ver tus contactos es la cuadrícula y la parte de la aplicación que rellena esa lista de contactos es la tienda..
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', fields: [name: 'id', escriba: 'int ', name:' first_name ', escriba:' string ', name:' last_name ', escriba:' string ', name:' dob ', escriba:' date ', dateFormat:' Ymd ' ]));); Como puede ver, hemos agregado una propiedad llamada "campos" a nuestro objeto de tienda. Los campos son como los encabezados de columna en una hoja de cálculo. Si cada fila en la hoja de cálculo es un registro, cada columna o campo en la hoja de cálculo representa alguna propiedad de ese registro. Para nuestro ejemplo de hoy, vamos a hacer una cuadrícula de datos llena de contactos para que cada registro en la tienda tenga: una ID que simplemente proporcione un identificador único para cada registro, un nombre, un apellido y Una fecha de nacimiento. Ahora, como puede ver, para cada campo hemos especificado una propiedad 'nombre' y una propiedad 'tipo'. Estas propiedades son bastante sencillas: solo le estamos diciendo a nuestra tienda qué tipo de campo es y cómo debería llamarse. Ahora, cuando llegue al campo dob (o fecha de nacimiento), notará que hemos establecido un tipo de "fecha" para indicar un campo de fecha (no hay nada realmente fuera de lugar), pero también hemos agregado una propiedad 'dateFormat'. Esta propiedad le dice a la tienda que el campo dob almacenará su valor de fecha en formato de año, mes, día. Esto puede parecer extraño ahora, pero será muy importante una vez que comencemos a configurar el resto de la cuadrícula.
Ahora que hemos configurado nuestra tienda y agregado algunos campos, avancemos y rellenemos con datos:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', fields: [name: 'id', escriba: 'int ', name:' first_name ', escriba:' string ', name:' last_name ', escriba:' string ', name:' dob ', escriba:' date ', dateFormat:' Ymd ' ], datos: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04', id: 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']));); Básicamente, lo que hemos hecho aquí es llenar nuestra tienda con datos de muestra utilizando los campos que definimos anteriormente como plantilla. Si mira de cerca, notará que los nombres de propiedad en los datos coinciden con los nombres de campo en la propiedad 'campos' de la tienda. Esto se llama 'mapeo'. Estamos asignando los datos de la propiedad de datos a sus campos asociados en la propiedad 'campos' de la tienda. También tenga en cuenta cómo nos hemos asegurado de hacer que los tipos de datos de los datos coincidan con los tipos de datos de la tienda. Si los mezcla, las cosas no se cargarán correctamente..
Bueno, eso es todo lo que necesitamos hacer para configurar nuestra tienda de red, así que volvamos a configurar la red en sí. Lo siguiente que queremos configurar en nuestra cuadrícula son las columnas. Esto es exactamente como suena: vamos a configurar qué columnas se mostrarán cuando se cargue nuestra cuadrícula.
Ext.onReady (function () Ext.create ('Ext.grid.Panel', width: '30% ', store: Ext.create (' Ext.data.Store ', fields: [name:' id ', escriba:' int ', name:' first_name ', escriba:' string ', name:' last_name ', escriba:' string ', name:' dob ', escriba:' date ' , dateFormat: 'Ymd'], datos: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04', id : 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']), columnas: [header: 'ID', dataIndex: 'id' , header: 'First Name', dataIndex: 'first_name', header: 'Last Name', dataIndex: 'last_name', header: 'Date of Birth', dataIndex: 'dob', format: ' m / d / Y ', xtype:' datecolumn ']);); Al igual que hicimos antes, hemos declarado la propiedad "columnas" y se ha pasado en una matriz de objetos, cada objeto representa una sola columna en la cuadrícula. Observe cómo cada columna contiene al menos dos propiedades: 'encabezado' y 'índice de datos'. El encabezado especifica lo que se muestra como el encabezado de la columna en la cuadrícula (lo que verá el usuario); dataIndex asigna esa columna a un campo particular en la tienda. ¡Y eso es! Eso es todo lo que necesitas hacer para construir una cuadrícula de datos.
Sin embargo, antes de que podamos decir que hemos terminado, debemos renderizar la cuadrícula en la pantalla. Para hacerlo, almacenemos nuestra cuadrícula en una variable que podamos reutilizar más adelante:
? var grid = Ext.create ('Ext.grid.Panel', ? Todo lo que estamos diciendo aquí es "Cuadrícula, renderizado al cuerpo del documento HTML" - Bastante sencillo. Continúe y actualice nuestro archivo index.html y vea cómo lo hicimos. Como puede ver, en menos de 30 minutos hemos creado una cuadrícula de datos robusta que tiene todas estas características: podemos mostrar y ocultar columnas, podemos ordenar los datos y podemos reorganizar las columnas. Ese es el poder de ExtJS!
En revisión, discutimos qué es ExtJS, la diferencia entre una biblioteca y un marco, cómo descargar e instalar ExtJS, y cómo definir y configurar un objeto ExtJS, en este caso una cuadrícula de datos..
Si desea obtener más información sobre ExtJS y leer la documentación, le sugiero que visite sencha.com. sitio web y consulte sus documentos API para ExtJS 4. Aquí encontrará toda la información que necesita para comenzar a desarrollar sus propias aplicaciones. Si te quedas atascado, puedes revisar los foros de sencha.com y pedirles ayuda, o cualquier otro sitio de programación que tenga un panel de mensajes..
