Aprendiendo Ext JS 3

Instalación de temas o “look and feel” Más videos

Descripción del tema

Por defecto, los componentes de Ext JS vienen en color azul claro, el cual es llamativo pero quizás no del gusto de todos; es por esto que existen diferentes estilos los cuales se pueden instalar y cambiar la apariencia de los componentes.

Material de apoyo

Para este tema es necesario descargar el material de apoyo que se encuentra en la parte superior derecha de la pantalla, es necesario descomprimir el zip y copiar el HTML dentro de la carpeta “instalacion” que hemos creado en temas anteriores. Recuerda que esa carpeta se encuentra dentro del servidor Web que se instaló al principio del curso.

Estilo por defecto

Al ejecutar el HTML descargado desde el explorador (ya sea Firefox, IE, etc) aparecerá una ventana de color azul claro; este es el estilo por defecto de los componentes Ext.

Instalación de temas

Junto con la librería que se descargó en el principio viene otro tema en color gris (ext/resources/css/xtheme-gray.css), es necesario importar este archivo al documento HTML en el que estamos trabajando agregándolo después del archivo “ext-all.css”, de la siguiente manera:
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/xtheme-gray.css" />
Al actualizar la página de ejemplo podemos ver que la ventana ha cambiado de aspecto, ahora se ve en color gris.

Descargar e instalar temas de usuarios

La comunidad de usuarios de Ext ha creado varios temas más, estos se pueden descargar desde la página oficial. Una vez que descargues el tema de tu agrado descomprime el ZIP; aparecen dos carpetas, una que se llama “css” y otra que se llama “images”. Para instalar el tema es necesario copiar el contenido de la carpeta “css” e “images” a la carpeta donde se encuentra el framework de Ext en ext-2.2/resources/css y ext-2.2/resources/images respectivamente. Después de copiar las carpetas debes importar el estilo al HTML de la siguiente manera:
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/xtheme-slickness.css" />
De esta manera habrá sido instalado el nuevo tema, actualizamos la página de ejemplo y veremos el cambio de aspecto de la venta.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

27Comentarios

  • Avatar-1 Jorge 27/02/2009

    Muy buen material. Gracias!

    • Avatar-10 ilen 02/03/2009

      POR FIN LE CAMBIE EL THEME A MI APLICACION GRACIAS!

      • Avatar-1 Ikaroraul 22/06/2009

        Maestro... una vez mas mis felicitacioesn muy buien tutorial... me estoy desvelando biendo tus tutos. Saludos

        • Avatar-5 Jorge Andres 10/07/2009

          Excelente!!

          • Avatar-5 Eduardo 22/02/2010

            Mis respetos para tu curso, lo haces de una manera muy amigable que se entiende a la perfeccion, recuerdo una frase de un amigo que dice: el conocimiento que no es compartido , no sirve de nada, de verdad con esto contribuyes a que mucha gente sea mejor, te felicito nuevamente y proximamente te regalare una taza de cafe or que bien vale la pena :)

            • Avatar-12 Eduardo Guerere 20/05/2010

              Muchisimas gracias por tu dedicacion Excelente videotutorial

              • Avatar-5 Zamora 15/06/2010

                Felicitarte por tan buenos aportes amigo, solo una preguntita si yo kiero que la ventana modal no pueda ser modificada en sus tamaños como lo hago? gracias desde ya...

                • Avatar-3 Crysfel 15/06/2010

                  Utilizas la propiedad "resizable:false"

                  • Avatar-3 Carlos Mario 24/06/2010

                    no me sale la ventana y ese es mi script que paso??? Ext.onReady(function(){ var win = new Ext.Windows{{ title:'Hola mundo', width:400, height:300, minimizable:true, maximizable:true }}; win.show(); });

                    • Avatar-11 Carlos Mario 24/06/2010

                      aunque mi version de ext js es 3.2.1 no creo q eso tenga algo q ver

                      • Avatar-6 Desarrollo Web 23/08/2010

                        Gracias por la informacion de ext-js

                        • Avatar-6 Andanzas 25/08/2010

                          Cambia {{ que aparece despues de Ext.windows por ({ y de manera similar para el cierre. Tambien puedes consultar el código del Demo (la liga aparece arriba del video)

                          • Avatar-5 David 15/10/2010

                            Felicidades de verdad pienso que asi debe ser la sociedad en que vivimos tiene que existir el intercambio de conocimientos, soy nuevo en esto, hice la importacion de los estilos pero cuando lo corro sale la pagina en blanco en el titulo solamente, acoto que uso WAMP 2.0, tendra que ver si es ext 2.3.0 o ext 2.2.0? saludos

                            • Avatar-1 Kuran 09/12/2010

                              Una pregunta pss soy nuevo y me interesa aprender extJS... en este tema me llamo la atención esto de las apariencias :D pero tengo una pregunta, hay alguna forma de usar otras bibliotecas de interfacez graficas, por ejemplo de gnome o algo asi?... No se si me explico :S

                              • Avatar-2 Juan 09/12/2010

                                Muy buen tutorial gracias por el servicio que estas prestando, quisiera preguntarte algo ressulta que yo sigo los pasos de tu tutorial uno por uno pero a pesar de eso no logro que se vea la ventana hello world en el navegador, espero puedan leer esto y darme una respuesta ya que a travez de mi medios no he podido dar con la respuesta

                                • Avatar-9 Koyo-T 13/12/2010

                                  Solo quiero felicitarte por el material del portal, está de 10.

                                  • Avatar-7 luis 27/01/2011

                                    hola, mira noc por q no me corre este codigo para visualizar la ventana, cuando ejecuto solo el alert, si funciona sin dificultad, estoy en algun error por q no veo cual sea....agradeceria su ayuda, muchas gracias de antemano utilizo la version 3.3.1 jexts Ext.onReady(function(){ //alert('holas'); var win=new Ext.Window({ title='holas', width:300, height:250, minimizable:true, maximizable:true }); win.show(); });

                                    • Avatar-11 luis 28/01/2011

                                      disculpen, q error el mio! :S!! el = despues de title

                                      • Avatar-3 cecy 09/02/2011

                                        Hola! estuve haciendo las pruebas pero no se que estoy haciendo mal, mi codigo esta igual por favor no visualizo la ventana, copie los archivos no veo el error

                                        • Avatar-6 Carlos 02/05/2011

                                          En respuesta para algunos chicos que no se les muestra la ventana: Revisen linea por linea su codigo... por ejemplo Ext.onReady(function(){ var win = new Ext.Windows{{ ... (Para un amigo que consulto anteriormente) Es "Window" NO "Windows" Lo mismo para uno que confundio "=" por ":"

                                          • Avatar-8 Manuel 17/11/2011

                                            Bueno el curso, soy nuevo en esto, mi pregunta iva a como descargo el material de apoyo, no lo ubico. Gracias

                                            • Avatar-7 angel 17/06/2012

                                              en donde descargo el archivo installation.html no veo ningun apartado de resourses en ningun lado

                                              • Avatar-4 José 28/09/2012

                                                Yo querría plantear una pregunta sobre licencias... si me descargo un tema GNU para una aplicación que pretendo comercializar... ¿ya no puedo hacerlo? Gracias desde ya =)

                                                • Avatar-3 Rodolfo 26/04/2013

                                                  Buenos dias, Tengo un programa en extjs, pero es la version 3.2 y la cosa es la siguiente. Yo lo uso con codeigniter y tengo en la parte superior una barra de herramientas donde hay un combo para seleccionar y en la parte inferior una tabla (se arma un TABLE HTML) con datos que lo hago con una libreria de codeigniter puesta en un controlador. La pagina carga bien. pero no puedo hacer que la tabla se vuelva a cargar cuando cambio el valor del combo. He intentado con Ext.getCmp('cc').doLayout(); y no carga, aunuqe si lo elimina con Ext.getCmp('cc').removeAll(); intente poner el componente como una variable independiente y volverla a cargar con: Ext.getCmp('cc').removeAll(); Ext.getCmp('cc').add(Ext.getCmp('ArmaTabla')); Ext.getCmp('cc').doLayout(); Pero nada, no junca, podrias darle una revisada por favor? ya llevo buen tiempo con esto y no puedo darle solución. Muchas gracias. envio codigo y disculpen la extension del codigo, Ext.ns('com.programa.reporteAdv'); com.programa.reporteAdv.panel = null; com.programa.reporteAdv.panelMensual = function(config){ // this.loadGrid=function(){ // var globalPanel = com.programa.reporteAdv.panel; // var idEvaluacion = globalPanel.getPanelActividad().getRecordSeleccionado(); // storeMensual.load({params:{idEvaluacion:idEvaluacion}}); // }; // this.cleanGrid=function(){ // storeMensual.removeAll(); // }; var sede = new Ext.form.ComboBox({ hiddenName:'idSede', id:'sede', // fieldLabel: 'Sede', labelStyle:'text-align:right;', allowBlank: false, forceSelection : true, triggerAction : 'all', mode: 'local', width:100, store : new Ext.data.JsonStore({ root:'data', totalProperty: 'total', url : BASE_URL +'comunes/sede/getAllSede', fields: [ {name:'gc_sede_abrev', type:'string', mapping:'gc_sede_abrev' }, {name:'gc_sede', type:'string', mapping:'gc_sede' } ] }), displayField : 'gc_sede', valueField : 'gc_sede_abrev', listeners:{ select:function(combo,index){ // Ext.getCmp('areaInv').clearValue(); // Ext.getCmp('servicioInv').clearValue(); // areaInv.getStore().load({params:{abrevSede:this.getValue()}}); // servicioInv.getStore().load({params:{idArea:'x',abrevSede:'y' }}); // Ext.getCmp('cc').doLayout(); // Ext.getCmp('cc').removeAll(); // Ext.getCmp('cc').add(Ext.getCmp('ArmaTabla')); // Ext.getCmp('cc').doLayout(); // Ext.getCmp('cc').reload(); } } }); sede.getStore().load({params:{x:'L'}}); var ArmaTabla = ({ xtype:'container', layout:'fit', id:'ArmaTabla', items:[{autoLoad :{url : BASE_URL +'adv_reporte/getRep', params:{abrevSede: Ext.getCmp('sede').getValue() }}}] }) //-- Toolbar --// var toolbarEval= ({ xtype:'toolbar', items: [ {xtype: 'tbspacer', width: 30}, 'sede : ',sede, {xtype: 'tbspacer', width: 30}, '-', { xtype:'button', iconCls: 'icon-formEdit', text : 'Auditoria', width:100, listeners : { click: function(){ auditoria(); } } } ] }); config = { autoEl:{}, region:'center', split:true, frame:true, layout:'form',//border:false, layout : 'border', tbar:toolbarEval, items:[{xtype:'container', layout:'fit', id:'cc', items:[{autoLoad : { url : BASE_URL +'adv_reporte/getRep', params:{abrevSede: Ext.getCmp('sede').getValue() } } }] }] }; com.programa.reporteAdv.panelMensual.superclass.constructor.call(this,config); } Ext.extend(com.programa.reporteAdv.panelMensual, Ext.Panel,{}); //--Panel REPORTE--// com.programa.reporteAdv.panelReporte = function(config){ // this.loadGrid=function(){ // var globalPanel = com.programa.reporteAdv.panel; // var idEvaluacion = globalPanel.getPanelActividad().getRecordSeleccionado(); // storeMensual.load({params:{idEvaluacion:idEvaluacion}}); // }; // this.cleanGrid=function(){ // storeMensual.removeAll(); // }; config = { autoEl:{}, region:'center', split:true, frame:true, items:[{ xtype:'container', layout:'fit', items:[{autoLoad :{url : BASE_URL +'adv_reporte/getRep',}}] }] }; com.programa.reporteAdv.panelReporte.superclass.constructor.call(this,config); } Ext.extend(com.programa.reporteAdv.panelReporte, Ext.Panel,{}); //--PANEL BASE-- com.programa.reporteAdv.panelBase = function(config){ var panelReporte = new com.programa.reporteAdv.panelReporte(); var panelMensual = new com.programa.reporteAdv.panelMensual(); // this.getPanelActividad=function(){ // return panelActividad; // }; this.getPanelMensual=function(){ return panelMensual; }; config = { loadingText:'Searching...', baseCls: 'x-plain', layout:'border', border:false, items:[panelMensual] }; com.programa.reporteAdv.panelBase.superclass.constructor.call(this,config); }; Ext.extend(com.programa.reporteAdv.panelBase, Ext.Panel,{}); (function(){ com.programa.reporteAdv.panel = new com.programa.reporteAdv.panelBase({}); var panel = com.programa.reporteAdv.panel; var $newPanel = Ext.getCmp(Ext.getCmp('doc-body').getActiveTab().getId()); $newPanel.panel = panel; $newPanel.add(panel); $newPanel.doLayout(); })();

                                                  • Avatar-8 Martín Rizzo 25/09/2014

                                                    Hola, no encuentro ningún link para descargar el material de apoyo. En la parte superior derecha de la pantalla donde dice "DESCARGAS" sólo me aparece un link a la demostración. Desde donde lo puedo descargar? Gracias

                                                    • Avatar-11 Jesus 06/05/2016

                                                      La pagina de extjs cambio y ya no encuentro los temas que tu muestras :(

                                                      • Avatar-12 Jesus 06/05/2016

                                                        O tienes algún tutorial que me ayude a realizar un tema a mi gusto?

                                                        Instructor del curso

                                                        Crysfel3

                                                        Autor: Crysfel Villa

                                                        Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                        Ver Demostración

                                                        Regístrate a este curso

                                                        Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                                        Tendrás acceso a descargar los videos, códigos y material adicional.

                                                        Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                                        Llevarás un registro de tu avance.