Instalación de temas o “look and feel”

ExtJS and Sencha Touch Themes and Templates

Instalación de temas o “look and feel”

Feb 13, 2009 | Español | By Crysfel | 21 Comments | Read in English

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.

Author: Crysfel

I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

Demo

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.

21 Responses to “Instalación de temas o “look and feel””

Jorge Feb 27, 2009

Muy buen material. Gracias!

Reply
ilen Mar 01, 2009

POR FIN LE CAMBIE EL THEME A MI APLICACION GRACIAS!

Reply
Ikaroraul Jun 21, 2009

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

Reply
Jorge Andres Jul 10, 2009

Excelente!!

Reply
Eduardo Feb 21, 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

Reply
Eduardo Guerere May 20, 2010

Muchisimas gracias por tu dedicacion Excelente videotutorial

Reply
Zamora Jun 15, 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…

Reply
- Crysfel Jun 15, 2010
  
  Utilizas la propiedad “resizable:false”
Carlos Mario Jun 24, 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();
});

Reply
- Carlos Mario Jun 24, 2010
  
  aunque mi version de ext js es 3.2.1 no creo q eso tenga algo q ver
- Andanzas Aug 24, 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)
Desarrollo Web Aug 23, 2010

Gracias por la informacion de ext-js

Reply
David Oct 15, 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

Reply
Kuran Dec 09, 2010

Una pregunta pss soy nuevo y me interesa aprender extJS… en este tema me llamo la atención esto de las apariencias 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

Reply
Juan Dec 09, 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

Reply
Koyo-T Dec 12, 2010

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

Reply
luis Jan 26, 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();
});

Reply
luis Jan 27, 2011

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

Reply
cecy Feb 09, 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

Reply
Carlos May 01, 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 “:”

Reply
Manuel Nov 17, 2011

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

Reply