By default, the Ext JS components are displayed in light blue, which is a nice color but maybe not everyone likes it; this is why there are many different styles where you can choose from, install them and change the appearance of the components.

Resources

For this chapter you need to download the resources which are at the top right of the screen, you need to unzip the file and copy the HTML to the folder "installation" that we have created in previous chapters. Don't forget that this folder is found inside of the Web Server folder that you have installed at the beginning of this course.

Default Style

When we execute the HTML, the one we have downloaded, in the browser (Firefox, IE, etc) a light blue window will appear; this is the style that the Ext components have by default.

Installation of the themes

With the library you have previously downloaded there's another theme in gray (ext/resources/css/xtheme-gray.css), you need to import this file to the HTML document that we have been working on, adding it after the file "ext-all.css" like this:

<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" />

When you update the example page you can see that the color of the window has changed, now it is in gray.

Download and install themes from users

The user community of Ext have created many more themes, you can download them from the official site. Once you have download a theme that you like unzip the file; there's going to be two folders, one is called "css" and the other one is called "images". To install this theme you need to copy the content of the folder "css" and "images" to the folder where the framework Ext is, in ext-2.2/resources/css and ext-2.2/resources/images respectively. After you have copied the folder you need to import the style to the HTML like this:

<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" />

This is how you install the new theme, update the page and you will see that the appearance of the window has changed.

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

Este tutorial pertenece al curso Learning 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!