Instalación de temas o “look and feel” Más videos
Descripción del tema
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.
Instructor del curso
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.
27Comentarios
Muy buen material. Gracias!
POR FIN LE CAMBIE EL THEME A MI APLICACION GRACIAS!
Maestro... una vez mas mis felicitacioesn muy buien tutorial... me estoy desvelando biendo tus tutos. Saludos
Excelente!!
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 :)
Muchisimas gracias por tu dedicacion Excelente videotutorial
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...
Utilizas la propiedad "resizable:false"
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(); });
aunque mi version de ext js es 3.2.1 no creo q eso tenga algo q ver
Gracias por la informacion de ext-js
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)
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
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
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
Solo quiero felicitarte por el material del portal, está de 10.
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(); });
disculpen, q error el mio! :S!! el = despues de title
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
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 ":"
Bueno el curso, soy nuevo en esto, mi pregunta iva a como descargo el material de apoyo, no lo ubico. Gracias
en donde descargo el archivo installation.html no veo ningun apartado de resourses en ningun lado
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 =)
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(); })();
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
La pagina de extjs cambio y ya no encuentro los temas que tu muestras :(
O tienes algún tutorial que me ayude a realizar un tema a mi gusto?