ExtJS Framework

ExtJS Framework

Con pocas líneas de código es posible realizar interfaces amigables para los usuarios. Es la librería más avanzada para el desarrollo rápido de aplicaciones con un look and feel totalmente novedoso y una arquitectura flexible. Este curso es impartido para nivel principiante y avanzado.

A continuación se muestra el temario del curso, cada semana se estarán subiendo capitulos

Introducción

Presentación del ponente, definición de objetivos y alcance del curso, también se hacen delimitaciones, limitaciones y requisitos para tomar el curso.
Introducción (6:39 minutos).

Instalación

Conocimientos y conceptos básicos para comenzar a trabajar a tu manera, es importante saberlos para evitar problemas en el futuro.
¿Dónde conseguir ExtJS? ¿Hay que pagar? ¿es gratis? (3:49 minutos)
Instalación básica del framework (7:06 minutos)
Instalación de temas o “look and feel” (5:29 minutos)
Que son los adapters y en que me beneficia (6:03 minutos)
Definición de la imágen spacer y su importancia (5:48 minutos)
Quizz: Primer capitulo del curso de ExtJS

Localización

Mediante ExtJS, es posible internacionalizar los widgets en diferentes lenguajes, por defecto se utiliza el Ingles, pero es posible hacer traducciones a otros lenguajes o buscar si alguien mas ya la ha realizado.
Instalando tu idioma (8:54 minutos)
Varios idiomas en un mismo sitio (9:07 minutos)

JavaScript orientado a objetos

Se definen términos y conceptos para programar orientado a objetos en JavaScript utilizando algunas utilerías que ExtJS nos proporciona para una fácil implementación.
Referencias en JavaScript (9:39 minutos)
¿Que es el scope o alcance de una variable? (8:14 minutos)
¿Qué son los Closures? (12:32 minutos)
El contexto y la variable “this”
Creación de objetos y métodos públicos
Métodos privados y métodos privilegiados
Paquetes y namespace
Herencia en JavaScript
Quizz: Conceptos fundamentales de JavaScript (Parte I)
Quizz: JavaScript orientado a objetos (Parte II)

Trabajando con el DOM

Se muestran las utilerías de Ext para manipular el DOM, trabajar con efectos y animaciones, realizar búsquedas en el DOM y aplicar eventos.
Conociendo al objeto “Element” (13:17 minutos)
La clase “DomHelper” (16:11 minutos)
Buscar elementos en el DOM con selectores
Aplicar efectos visuales a Elementos (19:30 minutos)
Quizz: Trabajando con el DOM

Mensajes y eventos

Se muestra como mostrar mensajes al usuario, como crear eventos sobre elementos del DOM
Alertas y mensajes al usuario (20:55 minutos)
Manejo de eventos sobre Elementos y componentes
Quizz: Mensajes y Eventos

Ajax y el objeto Store

Se muestra como realizar peticiones Ajax al servidor, se define el concepto del store y su importancia para el intercambio de información.
El objeto Ajax, peticiones GET y POST
¿Qué es un store y cómo funciona?
Leer información de un XML
Leer información en formato JSON
Quizz: Ajax y el objeto Store

Paneles, Ventanas y Pestañas

El panel es uno de los componentes mas utilizados en el framework es de importancia comprender su funcionamiento, las ventanas son útiles para almacenar otros componentes.
¿Que es un panel, para que sirve y cómo se crean? (22:08 minutos)
Una ventana flotante (12:50 minutos)
Barras de herramientas en paneles y ventanas
Barra de status en paneles y ventanas
Las Pestañas o Tabs

Los Formularios

Se muestra como crear formularios, validaciones, diferentes controles para capturar información e interactuar con un servidor para obtener y guardar información.
Formularios y campos comunes en ExtJS
ComboBox cargados localmente y remotamente (Ajax)
Combos dependientes
Un calendario para capturar fechas
Llenar formularios con información del servidor
Guardar información en el servidor
Validaciones simples en formularios
Validaciones personalizadas

Gráficas

Uno de los nuevos componentes de ExtJS 3.0 nos permite crear gráficas de diferentes tipos, en este capítulo mostramos algunas
Gráficas en ExtJS 3
Graficando series

Las Tablas

Este componente es muy utilizado para desplegar información, permite realizar muchas tareas de manera fácil y rápida.
Una tabla básica con información cargada de un array
Mostrar información de un archivo XML
Información contenida en formato JSON
Paginado remoto en un Grid (Ajax)
Formatear la información y agregar html a las celdas
Utilizando fechas y tiempo en un Grid
Editar la fila de un Grid en un formulario

Edición de tablas

En ocasiones es conveniente poder editar la información directamente en una tabla, de esta manera evitamos abrir un formulario con la información en cada campo.
Editar las celdas de un grid
Editar una celda mediante un Combobox
• Modificar un fecha utilizando un calendario
Guardar los cambios del Grid editable usando Ajax
• Hacer un CRUD automáticamente con REST

Árboles con ExtJS

Los árboles son útiles para mostrar de forma visual una jerarquía de organización, por ejemplo un directorio de documentos, una familia o grupo de personas, etc. Ext proporciona el componente ideal para esta tarea.
El componente Tree Panel
Arboles generados con Ajax
Cambiar íconos de los nodos
Desplegar el sistema de archivos del servidor
Explorador de archivos para el servidor
Drag and Drop para ordenar los nodos (Guardarlos en MySQL)
• Modificar los nodos seleccionados

Layouts y maquetación

Los layout se utilizan para crear la maquetación de un sitio, ExtJS provee maneras diferentes para lograr este objetivo, en este capitulo se analizan algunas.
Border layout
• El Viewport y sus regiones
• El acordeón
• Combinación de layouts

Plugins y extensiones

La comunidad de ExtJS es muy activa, prueba de ello es la cantidad de plugins que se han desarrollado y son ofrecidos de manera gratuita, aquí se muestran algunos de ellos y como integrarlos a tu proyecto.
• Por definir subtemas

 

Did you like this Post?

Share this with everyone, your vote will help us to keep publishing awesome posts.

84 Comments

  • jose 2.24.09

    El curso esta excelente.

    • Crysfel 3.4.09

      Que bien que te ha gustado, espero puedas recomendar este sitio a tus conocidos :D

  • kasoe 2.28.09

    Muchas Gracias!!!! lo mejor…sin duda

  • JORDI 3.3.09

    HOLA, ESPERO QUE SIGA EL CURSO PQ ESTÁ INTERESANTE, UNA MANERA DE INTRODUCIRSE EN EL EXTJS..ANIMO!!

  • juan 3.6.09

    Tu trabajo vale la pena. Enhorabuena, sigue así!!

  • Daniel Martínez López 3.26.09

    Que onda!!! Dios te Bendiga!!!
    Esta muy Bueno el Curso!!! vas explicando detalladamente cada paso.
    Espero que sigas Haciendo estos Video-Tutoriales.

  • Julio César Rodríguez Domínguez 3.27.09

    Creo que existen pocos video tutoriales de calidad, y el tuyo es uno de ellos, gracias a este me ha despertado más el gusto por aprender el framwork Ext Js. Espero y continues con este proyecto que iniciaste.
    Dios te bendiga, amigo.

  • Darian 3.28.09

    Crysfel este sitio esta muy bueno, pero tengo una conexion que no me permite ver los videos por la web. Me intereza el tema, porque satisface mis necesidades y agradeceria si hubiera disponible alguna documentacion en (*.doc; *.pdf ) del curso para aprender a utilizarlo. Agradeceria su ayuda . Me mandas un mail. Gracias

  • cristian 4.2.09

    EXCELENTE!!!! no puedo decir nada mas que eso.

  • Adri19 4.2.09

    buenisimo

  • juan 4.3.09

    Los contenidos son muy interesantes. Sigue así Crysfel !

  • Lestat 4.20.09

    Eres la banda Crysfel!, gracias por la calidad del curso

    Saludos

  • Jorge Abarza Jorquera 4.22.09

    Exelente!!!, el diseño del sitio es muy bueno y el curso es facil de aprender, espero continues con los otros capitulos y que encuentres auspicios para los espacios que estan vacios, sin duda si continuas extendiendo los cursos sera una pagina que todo programador debera tener como referencia..

  • Adrià 4.23.09

    Genial Curso, añadiré esta web a mi lector de feeds :-)
    Saludos y Gracias!

  • Gretel 4.25.09

    Muy bueno el curso, existe alguna forma de acceder al resto de los temas aunque no sea con un video tutorial? Muchas gracias

    • Crysfel 4.26.09

      Los únicos temas que se pueden ver son los que tienen un link, los otros todavía no estan listos, pero pronto serán cubiertos. sigue pendiente

  • Rodolfo 5.4.09

    Excelente curso, los sigo muy de cerca cada capitulo nuevo que crean para leerlo, muchas gracias por su dedicacion . . .

  • Cristian 5.13.09

    Gran curso, gracias!

  • Itziar 5.15.09

    Una pagina excelente

  • Hugo Rincon 5.19.09

    Me parece fantastico el curso, pero me gustaria saber si va a continuar? y cuanto se tarda mas o menos en salir un nuevo capitulo.

    • Crysfel 5.19.09

      Claro que si va a continuar, solo que no he tenido tiempo suficiente, hoy voy a publicar el siguiente tema en cuestión de un par de horas, sobre la frecuencia de las publicaciones espero que sea mas seguida ya que ayudarán algunos compañeros del foro con varios temas, esto hará que el curso se pueda terminar mas rápido ;)

      Te recomiendo seguirnos en el twitter para que estes al tanto de las actualizaciones ;)

      saludos

  • Hugo Rincon 5.19.09

    Ok gracias de verdad es un gran aporte este curso. hacia mucha falta.

  • Santiagoest 5.19.09

    Excelente este framework pero tengo serias dudas en el tema de licenciamiento. Incurro en alguna restriccion o costo al utilizar el framework en un portal de tipo comercial ?? no vendo software ni paquetes que contengan el framework, solo lo necesito para dotar a un portal comercial de funcionalidades en la interfaz. Puedo utilizarlo?
    Mil gracias

  • Juan 5.25.09

    Hola Crysfel, soy de Argentina estoy comenzando a utilizar Extjs. Uso este framework para mi trabajo de tesis, para graduarme de Ingeniero en Informática. Me parece excelente tu iniciativa!, sigue asi!. Saludos desde Mar del Plata, Argentina.!

  • NeoAlberto 5.25.09

    Excelente tutorial, muy practico y claro. Felicitaciones al expositor y quedo a la espera de la proximo clase.

  • Juan 5.30.09

    Hola Crysfel!. Estamos ansiosos de ver los proximos tutoriales!!!!. Saludos!

  • Ernesto 6.1.09

    El tutorial me gusta mucho.. pero quisiera saber cuando van a seguir publicando los temas que siguen??

    • Crysfel 6.1.09

      Pronto… estamos escribiendo otro justo ahora, te recomiendo seguirnos en twitter o inscribierte a las feeds para estar al tanto cuando sea publicado :D

      saludos

  • Gustavo Rojas 6.2.09

    Excelente tu trabajo quiero felicitarte no solo por tu arduo trabajo si no por tu dedicación a seguir adelante con este curso. Soy de Bolivia, Sucre-Bolivia y estoy con ganas de hacer mi tesis con esta libreria asi que tus cursos me cayeron como anillo al dedo y no solo eso, espero mas adelante poder tambien ayudar a mejorar tus cursos para que sean muy conocidos
    Saludos desde Bolivia

  • Ernesto 6.8.09

    necesito una ayudita con Ext JS… el problema es que cargo en un combo unos datos de una BD pero no se muestran, o sea el combo se despliega como si los cargara pero no se muestra nada

    y ya he comprobado que el metodo al que llamo me devuelve lo que quiero incluso la consola del firefox me lo imprime(porq los estoy devolviendo con un json_encode) pero el combo no me los muestra..!

    si me pudieran dar una ayuda!!

    • Crysfel 6.8.09

      Hola Ernesto, mira te recomiendo te registres en el foro y des mas detalles, algún error? muestranos tu código (en el foro) ;)
      saludos

  • Adaias 6.8.09

    Eres un fregon vato, espero aprender un poco de ti. chido proyecto

  • Diego 6.19.09

    Simplemente me parece EXCELENTE este post. Los cursos son muy claros, y espero que puedas seguir avanzando hasta completar todos los titulos, porque es muy util y de altisima calidad lo que esta cargado. felicitaciones Crysfel!!!

  • Paco 6.23.09

    Fantástico tutorial!

  • Mario Torrealba 7.2.09

    Crisfel, es excelente muy bueno para dar clases y explicar, una preg como hicistes los videos? que programa usastes para grabar lo que hacias en la computadora y grababas tu voz? y con cual herramienta hicistes el blog?
    Excelente el curso, es justo lo necesario para cuando se quiere aprender algo
    en tus ejemplos o en el curso no veo como utilizar la herramienta con mysql portgress etc. soy nuevo en el tema y veo que todos los ejemplos usan info cargada en var mydata = [la data], pero como hacer con una bd de verdad, es lo que no vi en el curso, y si lohay en donde esta… gracias

    • Crysfel 7.2.09

      Los videos los grabe con el “Camptasia” para mi el mejor software para grabar tu escritorio, el blog esta hecho con wordpress, y tienes razón, en este curso solo estoy mostrando como utilizar Ext JS, normalmente cargando la información de un arreglo javascript o mediante XML o JSON por medio de Ajax, sacar la información de una base de datos es muy sencillo, dependiendo el lenguaje que uses y la base de datos, te invito a registrarte en el foro (http://foro.quizzpot.com) si tienes mas preguntas, ahi podremos platicar mejor ;)

      saludos

  • Gustavo 7.2.09

    Hola com estas Criss de nuevo felicidades por tu emprendimieto pero , espero que el proyecto no se quede asi y seguir avanzando en el mismo. Saludos

    • Crysfel 7.2.09

      Yo tampoco espero que se quede ahi… ultimamente he tenido mucho trabajo y no me queda tiempo suficiente para avanzar como yo quisiera :(

  • carlos 7.2.09

    Esta excelente su pagina, que bueno que se interesan por conpartir lo que saben, muchas gracias y sigan asi, saludos

  • Homero 7.2.09

    Sigue con los cursos estan muy muy interesantes. A mis compañeros de tesis se los voy a recomendar.
    Muchas Gracias

  • carlos 7.3.09

    Excelente aporte, felicidades por tu interes en ensenarnos lo que sabes, muchas gracias y saludos.

    p.d por mera curiosidad y esperando no te moleste la pregunta, vas a explicar aplicaciones con bases de datos directamente con este framework

    • Crysfel 7.3.09

      No tenía pensado hacerlo puesto que hay cientos de tutoriales en internet sobre hacer consultas a bases de datos, pero en vista de que varios usuarios lo estan pidiendo espero agregar esos temas al curso ;)

  • Juan Zevallos 7.5.09

    Agradecerte por este blog, realmente muy interesante y bien explicado.. recien cmienzo a usar este framework y me parece excelente, gracias por la ayuda que brindas con estos tutoriales.

  • suarez 7.14.09

    como descargo los videotutoriales, muchas gracias amigo.. t lo agradezcp de corazon

  • spit 7.20.09

    Hola. Voy a iniciar el curso porque estoy iniciandome en la libreria…he visto algunas cosas sueltas de la pagina y me parecen geniales… espero ayuda…un saludo a todos

    • Crysfel 7.20.09

      Si necesitas ayuda puedes registrarte en el foro (http://foro.quizzpot.com) y unirte a la comunidad que día a día crece, actualmente hay varios usuarios muy activos dispuestos a ayudar, saludos.

  • spit 7.21.09

    Hola Crysfel, ya me registre en el foro y no dudes de que estare pendiente y pondre comentarios porque el tema me interesa mucho y tengo muchas ganas de aprender extjs ademas a lo mejor me sale un trabajo pero claro necesito primero adquirir conceptos y coger un poco de dominio con la libreria. Ya he visto todos los videos y casi todos los textos.Gracias por lo que haces. Cuando tenga tiempo e ingrese direno en paypal te invito a un cafe.Un saludo…

  • fires 7.27.09

    Hola..es impresionante lo sencillo que lo hiciste explicando varios conceptos sobre la libreria, javascript, etc.
    Me esta gustando mucho tu trabajo..
    No puede ver todos por falta de tiempo..pero los que vi, cada ves me sorprende mas..
    Sigue asi.. Y si necesitas ayuda avisame..asi hacemos algo..
    Mucha fuerza en este y tus proximos proyectos..
    Cuando pueda le estare diciendo a mis compañeros de facultad..
    Exitos..y una ves mas..MUCHAS gracias..
    ;)

  • Miklo velka 7.29.09

    que honda podrias publicar un ejemplo explicando la aplicacion web tipo escritorio la he analizado del ejemplo del api pero algunos terminos no los entiendo

    sale…

  • Muy bueno el trabajo! 8.10.09

    Buscaba hace dias algo que me mostrara de una manera muy clara las bondades de ExtJS.

    Espero continues con el resto del tutorial. Excelente trabajo.

  • Sergio 8.13.09

    Muchas gracias por el tutorial! La verdad que es muy completo y bien explicado. Espero que sigas con el resto de los capítulos. Saludos!

  • Luis López 8.14.09

    El sitio se ve excelente, lo encontré mientras buscaba por donde empezar con ExtJs, voy a leerme todo el curso, gracias por compartirlo con todos, en una oportunidad que tenga recomiendo tu sitio en mi blog.

    Saludos!

  • quisiera saber como usar esa programación con flash, ya que flash permite una dinámica excelente, por ejemplo la carga de la data esta con xml como usando este tipo de programación puedo modificar y actualizar documentos xml, por cierto están buenos los cursos, visita theprojectparty.com y verito.net para que veas a lo que me refiero

    • Crysfel 8.17.09

      Para modificar los XMLs necesitas un lenguaje que se este ejecutando en el servidor y sea capaz de leer/escribir en el disco duro como por ejemplo Java, Ruby, PHP, etc…

    • gracias ya conseguí unos tutos que hablan al respecto y como dices voy a usar php porque mi server es linux, gracias por la ayuda

  • Saulo Pineda Cubillas 8.29.09

    Saludos… Excelente el trabajo, justo cuando estaba a punto de avandonar este framework, encuentro tu este sitio, mil gracias estado viendo esto por tres horas, sigue adelante te apoyo y te recomiendo.
    Esperando los avances próximos.
    Muchos Éxitos.

  • Martin Navarro Espinoza 8.31.09

    Excelente Tutorial, muy bueno!!! espero con ansias que puedas avanzar con el resto de capitulos.
    Muchas Gracias!

  • Alvaro Hernández 8.31.09

    Que gran Señor es usted, Excelente curso, en verdad fantástico y muy útil, mil gracias y Felicitaciones.

    Sólo unas dudas, que pasó con los items :
    “Eventos comunes en las pestañas” del capítulo “Paneles, Ventanas y Pestañas”;
    y el item “Áreas de texto y editores de html” del capitulo “Los Formularios” ??

  • César Melnik 9.21.09

    Si Mozard compartió si talento con el mundo, gracias por imitarlo… sos un genio :) ,
    “el conocimiento es patrimonio de la humanidad”

  • Roberto Mejia 9.26.09

    Dios mio! no hay palabras para agradecer tanta informacion, tan valiosa…..simplemente, mil gracias

  • luisorellana 10.6.09

    Muy bien Crysfel , exelente tu aporte y tu iniciativa. Pero tengo un gran dilema en cuanto a la conexion con base de datos. En tus tutoriales explicas que puede hacerce una conexion atraves de otros lenguajes como php.
    ¿Hay otra forma de poder conectarse a una base de datos pero sin recurrir a otros lenguajes de programacion utilizando Ext GWT?

    • Crysfel 10.6.09

      Ext GWT es Java, por lo tanto puedes utilizar JDBC, ODBC, Hibernate, JPA, datasources, etc… ;)

  • luisorellana 10.7.09

    Tengo otra pregunta Crysfel .¿saves de una pagina tan buena commo estas que enseñe como utilizar bien Ext GWT?

    • Crysfel 10.8.09

      Hola Luis.

      La verdad es que no conosco ninguna al respecto, pero te recomiendo entrar a la wiki oficial, ahi tienen algunos tutoriales y documentación

  • luisorellana 10.8.09

    Hola a todos :) … ¿Existe alguna pagina tan buena como estas que se encarge de enseñar Ext GWT?

  • Roberto 10.27.09

    Felicidades! Por los Tutoriales y con respecto a la pregunta de arriba no creo que haya una pagina mejor que esta para aprender extjs y ten en cuenta que la recomendare a muchas personas ya que me ha ayudado de mucho y espero sigas subiendo mas tutoriales porq estan de @@@@ :P

  • Charly 10.29.09

    Crysfel, dejame felicitarte por el esfuerzo de publicar estos contenidos, sigo esperando a los nuevos contenidos, felicitaciones !!!

  • Carlos 11.1.09

    Gracias por el trabajo que estás realizando. Un trabajo excelente.

  • Jorge 11.17.09

    Crysel. Excelente trabajo. Muchas gracias por tu claridad.

    Aguardo el capítulo “Hacer un CRUD automáticamente con REST”

    ¿para cuando lo tienes planeado?

  • César Mendez 11.18.09

    una consulta que IDE usas para programar esas aplicaciones web?

    • Crysfel 11.18.09

      Normalmente utilizo eclipse con varios plugins, actualmente estoy probando Aptana que funciona muy bien.

  • Julian 12.5.09

    Excelente tutorial, cambia en algo si lo hago con la versión 30.3 ???

    • Crysfel 12.7.09

      No, debería funcionarte igual, de hecho la mayoría de los tutoriales estan hechos para la versión 3.

  • Fernando Daniel Jiménez 12.15.09

    Muchas felicidades Crysfel, estas haciendo un excelente trabajo con este tutorial compartiendo tus conocimientos y lo mejor de todo es que lo haces de una forma clara y fácil de entender. Sigue así. ¡Éxito!.

  • RAUL OROZCO 1.14.10

    Tengo un proyecto en puerta, me gustaria capacitar a mi equipo en el DF o en su caso pudieras colaborar con nosotros en el desarrollo.

  • Hola Crysfe me podrias decir de donde me los puedo desacaragr tus videos del curso de extJS es q la verdad estan genial y me gustaria bajarmelos para poder verlos en mi casa ya q en el internet me sale muy caro como no tengo inter voy aun cafe internet para verlos y la verdad seria mejor q nos lo podamos bajar para verlos mas comodamente en casa y practicar asi con los ejemplos q tiene cada apartado del video tutorial con sus respectivos codigos o material, solo es una jugerencia pero como te digo como hago para bajarmelos tud videos amigo Crysfel.

    atte: Diego Gonzales Soto
    saludos cordiales.

  • Bachsmann 2.18.10

    esto es la caña tio..
    te pasaste super weno!!
    excelente Curso…

  • pablo 2.19.10

    Para cuando un nuevo tuto?? ;)

    • Crysfel 2.22.10

      Puffff…. espero que esta semana tenga más tiempo, tengo uno a medias espero poder concluirlo pronto.

      saludos y sigue pendiente por el RSS, twitter, facebook o mail ;)

      Saludos

  • Cristhian Cuya 2.20.10

    Hola a todos en Quizz!!, sinceramente creo que nunca había encontrado una página donde se enseñara tan claro y directo. Felicidades a los creadores, saludos de Perú.

  • spawn1690 3.3.10

    Gracias amigo me ha parecido entretenido y aplicable

  • Luis 3.8.10

    Hola Crysfel primero que nada te felicito por este curso, gratuito y totalmente aplicable. me parece genial el trabajo que vienes haciendo, tengo una pregunta, particularmente vivo en una zona rural y quiero seguir el curso, hay alguna forma de estudiar el curso en mi pc localmente?. o algun material de trabajo para descargar que pueda ayudarme. con todo respeto que recomiendas a clientes que no tienen acceso a la web y esten interezado en tus curso. respetuosamente mis sinceras felicitaciones a usted y a aquellos que participan en este arduo trabajo. Es simplemente impresionante, quizas me toque mudarme… GRACIAS

  • Luis 3.8.10

    disculpas


Leave a Reply

Submit

Sponsors

Donations

Please buy me a coffee, I am sharing my time and knowledge with you for free, help support this project with your donations. Thanks!

What are we doing?