Instalación de temas o “look and feel”

Feb 13, 2009 | Español | By Crysfel | 10 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.

10 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