Apr

Introduction to ExtJS

08 Apr 2009 by tonie in Javascript

Finally I found the time to sit down and write about this wonderful framework. Among the numerous JavaScript libraries out there, only Ext provides you with all the widgets you need to create a great desktop-like application on the web. Ext allows the developer to easily manipulate ready-to-use classes and build application interfaces, which could otherwise look impossible to create. But enough fancy words about it, let's see how it works for real. First thing is first. Go ahead and download the latest version of the package (2.2.1 by the time this was posted). If you want to take a look of the capabilities of ExtJS, you can check out the examples on their web page. Or if you have a local web server software running, extract the files from the archive you downloaded to a directory called extjs and navigate to http://localhost/extjs/examples/samples.html to check out all the examples locally.

Impressed yet? You will be even more fascinated after finding out how easy it is to set up the framework and use it to create you own stuff. One thing I love about ExtJS is that it is cross-browser compatible and you don't have to worry about how widgets will be rendered on different browser clients. All you need to do in order to start using Ext is include it in your pages. It takes care of the browsers' caprices automatically.

Include ExtJS in your pages

Create an example .html page and again extract the contents of the archive in a directory named extjs

<html>
<head>
    <title>Including ExtJS</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
</head>
<body>
    <!-- Some stuff here -->
</body>
</html>

There you go! You have included the library in your page and are ready to begin using it. Before we go further, let me stress on a couple of things you need to remember. First, it is very important that you don't change the order of the included files. It is a good practice to include any additional files of the library after you have included ext-base.js and ext-all-debug.js. Second thing I want to tell you is once you have developed your application and it is ready for the production stage, you might want to consider using ext-all.js instead of ext-all-debug.js, since the latter is compressed and will load faster.

Popping up a window

Lets see what happens if you write down the following code between <script> tags

Ext.onReady(function(){
    Ext.Msg.alert('Whats up?', 'Hello World!');
});

Tadaa! This simple piece of code gave you a nice looking, desktop-style pop-up message box. Ext.onReady(); functions tells the browser what to do when the DOM has loaded. Ext.Msg.alert(); function pops up the fancy message box, taking two parameters - first one is the box title and the second contains the text to be shown. Does that look familiar?

ExtJS in your language

Luckily for me Ext developers have thought about the non-english speakers and created a localization system. After the .css and the two .js files you have included in the <head> of your document, try adding the following line: <script type="text/javascript" src="extjs/build/locale/ext-lang-it-min.js" /> to make all ExtJS components in Italian. Explore the directory extjs/build/locale to see all the available language files.

The transparent 1x1 pixel GIF

In order for Ext to render its widgets properly, it needs a transparent, 1px by 1px .gif image. So let's give it one.

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = 'images/s.gif';
});

The URL to the image in this case is relative to our document, but it is a good practice to give it the full URL when your applications become bigger and bigger.

Configuring stuff

ExtJS allows you to easily configure your widgets, using the config object. Let's see what that is.

Ext.onReady(function(){
    Ext.Msg.show({
        title: 'Hello',
        msg: 'Hi there, do you like ExtJS?',
        buttons: {
            yes: true,
            no: true,
            cancel: true
        },
        fn: function(button) {
            Ext.Msg.alert('Click!', 'You clicked: '+button);
        }
    });
});

The configuration options take place in the config object between the two curly braces. In our case we call a message box with several options, which are pretty straight forward:

Title: Hello
Message: Hi there, do you like ExtJS?
Buttons: Yes, No and Cancel
Function: Show which button was clicked

Note here that button values can also be strings. In this case the function of our message box will return string values instead of yes, no or cancel.

buttons: {
    yes: 'Of Course!',
    no: 'No way',
    cancel: 'Go away'
}

Where to go from here?

That was cool, but what else can I do except for fancy message boxes, buttons and prompts? Well, you will be surprised how flexible Ext can be. Widgets include Forms, Panels, Layouts, Trees, Grids, Editable Grids, Effects, and many many more. You might want to check the ExtJS Learning Center to get you more familiar with the library. Also there is a significant deal of tutorials, which explain the basic usage of some of the widgets. If you come across a problem that you cannot solve be sure to check out the ExtJS FAQ or search the ExtJS Forums for an answer. Of course, you can always ask Google if you cannot find your answer in any of those places. There's also much information about ExtJS, plugins and extensions on Saki's page and also some great examples. You can also search the API Documentation online or if you have a local web server, simply navigate to http://localhost/extjs/docs. For those of you, who want to start learning ExtJS seriously, I highly recommend that you get a copy of Steve Blade's book "Learning Ext JS".

Well, I hope I managed to get you a little familiar with the powerful ExtJS JavaScript client-side framework. (Whew, that was tiring!)

Cheers, T.

Tagged as: extjs, javascript, framework, library

Speak your mind ( 2 Comments)

#1 by jhezze on 8/4/09

i have simple text and regular buttons what i do wrong?

#2 by tonie on 8/4/09

Check if you have properly included the CSS style sheet. The correct code would be <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> if you have extracted the contents of the archive in the extjs folder

If you liked the article and want to contribute to it, please feel free to leave your comment. HTML tags are not allowed, but you can use the following BBCode to enhance your message: [url] [quote] [code] [b] [i] [u] [color].

Anthony H Karasavov