Once we know where to download the official library of Ext JS, we need to learn how to install the framework in the project that we are going to create for this course. This chapter explains how to do that.

Web Server

For this chapter and the rest of the course, I'll be using a Web Server. To not run into problems with the installation I will use an easy installer of Apache 2, PHP5, MySQL; the installer is called AppServ and you can download it from its official site. The installation is very easy, you just have to follow the steps of the Wizard; once the installation is finished you need to open the directory where you installed and in the folder "www" create a folder called "course", inside of this folder create another one called "ext-2.2" and another one called "installation".

Copy the files and folders needed

Inside of the ext-2.2 folder you need to copy the following files and folders of the library we have downloaded in the previous chapter. • ext-all.js: all the widgets and components of the Framework are found in this file. • adapter: in this folder you will see different libraries like prototype, jQuery, YUI and Ext JS; we will talk about this libraries in another chapter, for now just copy the content. • Resources: in this folder we have the images and styles we need for the components of the Framework.

Import the Framework in a HTML

To import the Framework in a HTML document you need to import the style, the adapter and the components. Para importar el framework a un documento html, es necesario importar el estilo, el adapter y los componentes. You can see the paths of what we need to import in the following list: • ext-2.2/resources/css/ext-all.css • ext-2.2/adapter/ext/ext-base.js • ext-2.2/ext-all.js At the top right of this page you can download the HTML we will be using for this example, also you can download the source code or see execute the example. To import the files mentioned above you need to do this:

<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
 
<script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>

Testing the Framework

To test the installation, we are going to show an alert when the DOM is ready to be used, so lets add a listener to the event "onReady" like this:

Ext.onReady(function(){
            alert('well done!!');
});

The event onReady is very similar to the event onLoad, the difference is that the vent onLoad gets executed until all the elements of the page have been completely loaded to the browser; this includes the images, styles, JavaScript and the DOM constructed. The event onReady gets executed when the DOM is ready, it doesn't mater if the images are not done loading completely; this help us not to wait a long time in order to execute our code.

Executing the example

To execute see the example up and running you need to open you favorite browser and open the HTML created in the previous steps. In the URL type http://localhost, with this we will access the root directory of the server we installed at the beginning, there you will see the folder course; inside you should see the folder "ext-2.2" and "installation", in the folder installation es where the HTML was saved. If everything went right, when you open the HTML the alert will show a message, which indicate that we have installed the Framework successfully.

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!