Getting Started Ext Js - Part 2

Including Ext in your pages

Before we can use Ext in our pages, we need to reference the Ext library files. To do this, we need to include a few of the files provided in the SDK download in the HEAD portion of our HTML page.

The path to the Ext files must be correct and is relative to the location of our HTML file. These files must be included in the following order:

• ext-all.css: The main Ext CSS file
• An external js library file, if needed (one not used in the examples in this book; however if you need to use an external library it is covered in the ‘Adapters’ section of this chapter)
• ext-base.js: The Ext ‘adapter’—we will learn more about this file later in this chapter
• ext-all.js or ext-all-debug.js: The primary Ext library file
• A theme file could also be included here, or at any point after the main Ext CSS file

What do those files do?

We have included the following three files that Ext requires to run in our page:

• ext-all.css: A stylesheet file that controls the look and feel of Ext widgets. This file must always be included as-is, with no modifications. Any changes to the CSS in this file would break future upgrades. If the look and feel of Ext needs to be adjusted, another stylesheet containing the overrides should be included after the ext-all.css file.
• ext-base.js: This file provides the core functionality of Ext. It’s the engine of the Ext car. This is the file that we would change if we wanted to use another library, such as jQuery, along with Ext.
• ext-all-debug.js/ext-all.js: All of the widgets live in this file. The debug version is used for development, and then swapped out for the non-debug version for production.

Once these files are in place, we can start to actually use the Ext library and have some fun.

Using the Ext library

Now that we’ve added the Ext library to our page, we can start writing the code that uses the Ext library. In the first example, we will use Ext to display a message dialog. This might not sound like much, but it’s a start.

Time for action

We can run some Ext code by adding a script section in the head of our document, right after where the Ext library has been included. Our example will bring up an Ext style alert dialog:

Download source code.

We’re not going to cover exactly what our example script is doing yet. First, let’s make sure that the Ext library is set up properly. If we open up our page in a web browser, we should be able to see an alert message like the one shown here:

Just like a “real” dialog, you can drag it around, but only within the constraints of the page. This is because this isn’t a real dialog; it’s a collection of DIV tags and images put together to imitate a dialog. You can also see that the Close and Ok buttons get highlighted when you move the cursor over them—not bad for one line of code! Ext is taking care of a lot of the work for us here, and throughout this book, we’ll see how to get it to do much more for us.

Asynchronous!

The Web 1.0 way of doing things has all of our code happening in succession—waiting for each line of code to complete before moving on to the next. Much like building a house, the foundation must be complete before the walls can be built, then the walls must be complete before the roof is built. With Ext, we can easily start working on the roof of our house before the foundation has even been thought about. Imagine the roof of our house is being built in a factory, while at the same time we are building the foundation, then the walls, and we come in when all of this is done and set the roof that has already been built on top of it all.

This introduces some things we’re not use to having to cope with, such as the roof being complete before the walls are done. No longer are we forced to take a line-by-line approach to web development. Ext helps us out by giving us events and handlers to which we can attach our functionality. We can set up an event that waits around, watching to see when the walls of the house are built, and then sets the roof on top once this has happened. This method of thinking about web pages is hard for most people who have grown up in web development. But it won’t be long before you are an expert at it.

Artikel Menarik Lainnya