• Twitter
  • Buzz
  • Facebook
  • LinkedIn
  • NetworkedBlogs
  • Digg
  • Picasa
  • Flickr
  • YouTube
  • Last.fm
  • Delicious
Komunitas Blogger Bekasi

Bekasi-IT – Blog Design

Bekasi-IT adalah adalah suatu lembaga yang bergerak dalam bidang IT Consultant dan Entrepreneurship dengan slogan Embrace Customer Satisfaction.

Subscribe to Feed

Tech Lounge

Getting Started Ext Js - Part 2

Posted on: 4/08/2009 08:04:00 PM by Koharudin

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:

Simple Tasks

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.


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

Tidak ada komentar:

Posting Komentar

What we can do!

  • Web & Interface Design You have a vision - and we have the ability to convert that vision into a living breathing website.
  • Develop Application Do you wish to have an application either running on desktop, web , or even your mobile device. We already help you to bridge your dream
  • Blog Design Our free blog themes have been downloaded over 100,000 times. We can transform your blog from generic and drab into eye-popping and converstation-starting.
  • Markup and Style Optimization HTML, CSS, and JavaScript optimization. Transform your website from sluggish to lightning fast.

Recent Comments

Latest Blog Entries

Historical Readers

Web Hosting

We get asked a lot - who should we use for web hosting? We recommend HostGator Web Hosting