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.
85 Comments
-
-
Que bien que te ha gustado, espero puedas recomendar este sitio a tus conocidos
-
-
Muchas Gracias!!!! lo mejor…sin duda
-
HOLA, ESPERO QUE SIGA EL CURSO PQ ESTÁ INTERESANTE, UNA MANERA DE INTRODUCIRSE EN EL EXTJS..ANIMO!!
-
Tu trabajo vale la pena. Enhorabuena, sigue así!!
-
Que onda!!! Dios te Bendiga!!!
Esta muy Bueno el Curso!!! vas explicando detalladamente cada paso.
Espero que sigas Haciendo estos Video-Tutoriales. -
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. -
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
-
EXCELENTE!!!! no puedo decir nada mas que eso.
-
buenisimo
-
Los contenidos son muy interesantes. Sigue así Crysfel !
-
Eres la banda Crysfel!, gracias por la calidad del curso
Saludos
-
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..
-
Genial Curso, añadiré esta web a mi lector de feeds
Saludos y Gracias! -
Muy bueno el curso, existe alguna forma de acceder al resto de los temas aunque no sea con un video tutorial? Muchas gracias
-
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
-
-
Excelente curso, los sigo muy de cerca cada capitulo nuevo que crean para leerlo, muchas gracias por su dedicacion . . .
-
Gran curso, gracias!
-
Una pagina excelente
-
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.
-
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
-
-
Ok gracias de verdad es un gran aporte este curso. hacia mucha falta.
-
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-
Si vas a liberar tu código como Open source, no es necesario pagar, pero si no quieres liberar el código de tu portal tienes que comprar la licencia comercial para los desarrolladores que hagan el portal, la licencia aplica para los proyectos que quieras realizar.
http://www.quizzpot.com/2009/02/donde-conseguir-ext-js-y-sus-licencias/
saludos
-
-
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.!
-
Excelente tutorial, muy practico y claro. Felicitaciones al expositor y quedo a la espera de la proximo clase.
-
Hola Crysfel!. Estamos ansiosos de ver los proximos tutoriales!!!!. Saludos!
-
El tutorial me gusta mucho.. pero quisiera saber cuando van a seguir publicando los temas que siguen??
-
Pronto… estamos escribiendo otro justo ahora, te recomiendo seguirnos en twitter o inscribierte a las feeds para estar al tanto cuando sea publicado
saludos
-
-
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 -
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!!
-
Eres un fregon vato, espero aprender un poco de ti. chido proyecto
-
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!!!
-
Fantástico tutorial!
-
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-
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
-
-
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
-
Yo tampoco espero que se quede ahi… ultimamente he tenido mucho trabajo y no me queda tiempo suficiente para avanzar como yo quisiera
-
-
Esta excelente su pagina, que bueno que se interesan por conpartir lo que saben, muchas gracias y sigan asi, saludos
-
Sigue con los cursos estan muy muy interesantes. A mis compañeros de tesis se los voy a recomendar.
Muchas Gracias -
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
-
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
-
-
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.
-
como descargo los videotutoriales, muchas gracias amigo.. t lo agradezcp de corazon
-
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
-
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.
-
-
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…
-
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..
-
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…
-
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.
-
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!
-
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
-
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
-
-
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. -
Excelente Tutorial, muy bueno!!! espero con ansias que puedas avanzar con el resto de capitulos.
Muchas Gracias! -
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” ?? -
Si Mozard compartió si talento con el mundo, gracias por imitarlo… sos un genio
,
“el conocimiento es patrimonio de la humanidad” -
Dios mio! no hay palabras para agradecer tanta informacion, tan valiosa…..simplemente, mil gracias
-
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?-
Ext GWT es Java, por lo tanto puedes utilizar JDBC, ODBC, Hibernate, JPA, datasources, etc…
-
-
Tengo otra pregunta Crysfel .¿saves de una pagina tan buena commo estas que enseñe como utilizar bien Ext GWT?
-
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
-
-
Hola a todos
… ¿Existe alguna pagina tan buena como estas que se encarge de enseñar Ext GWT? -
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 @@@@
-
Crysfel, dejame felicitarte por el esfuerzo de publicar estos contenidos, sigo esperando a los nuevos contenidos, felicitaciones !!!
-
Gracias por el trabajo que estás realizando. Un trabajo excelente.
-
Crysel. Excelente trabajo. Muchas gracias por tu claridad.
Aguardo el capítulo “Hacer un CRUD automáticamente con REST”
¿para cuando lo tienes planeado?
-
una consulta que IDE usas para programar esas aplicaciones web?
-
Normalmente utilizo eclipse con varios plugins, actualmente estoy probando Aptana que funciona muy bien.
-
-
Excelente tutorial, cambia en algo si lo hago con la versión 30.3 ???
-
No, debería funcionarte igual, de hecho la mayoría de los tutoriales estan hechos para la versión 3.
-
-
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!.
-
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. -
esto es la caña tio..
te pasaste super weno!!
excelente Curso… -
Para cuando un nuevo tuto??
-
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ú.
-
Gracias amigo me ha parecido entretenido y aplicable
-
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
-
disculpas
-
Crysfel, ahora me encuentro con un problema;quiero colocar un tooltip con elementos cargados de la base de datos como sugerencias, pero el control que quiero utilizar no se a renderizado y creo por eso no se aplica el tooltip, por que lo pongo para un un cotrol que se renderiza cuando se carga la pagina y anda bien.
El curso esta excelente.