Getting Started with Ext JS


What is Ext JS?

Ext started as an extension to YUI , but since has evolved into a full framework., describing itself as being a “cross-browser JavaScript library for building rich internet applications“. While this description stands true, it is however too simple to describe this awesome JavaScript framework.

Ext is extremely powerful and well written. Its true Object oriented nature and design make it perfect for seasoned developers, compared to other mainstream frameworks. If want to create Rich Internet Applications (RIA) Ext is the tool to use: it has an extremely complete GUI toolkit, providing you with tons of components that mimic desktop applications’ fluidity and complexity on the web. Just check Ext demo page, I’m sure you will be dazzled by what you can achieve with it.

You can get Ext in two forms Ext Core and Ext JS.

  1. Ext Core is the “lite version” of Ext JS, offering the same kind of functionality as other popular JS frameworks. It’s licensed under the very permissive MIT license. As you might have guessed the GUI components are not included in the Core.
  2. Ext JS comes with a lot of extra features and lots of GUI gadgets. You can get it under one of the two licenses: under a GPL or a commercial license that waives the GPL restrictions.

Ext (both Core and JS) is well documented and feature a wide variety of demos and an easy to follow manual . It also has great support community.

In this article we’ll teach you how to get started with Ext JS.

Getting started with Ex

  1. Download Ext JS
  2. Unzip it to a folder and you are ready to go!

Don’t be alarmed by the file size, you are downloading the full package including sources and examples After having Ext in your project folder all that is missing is including its files in your HTML.

You need to include Ext JavaScript and css files:

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

The above code should be enough to get you started, assuming you unzipped Ext into a folder named ext-3.3.0

An in depth introduction to Ext HTML setup is available here make sure you also read the Ext getting started guide.

Hello World

Maybe the easiest way to start using Ext in your existing web site is by replacing those nasty JavaScript alert boxes.

In Ext creating a fancy alert box is easy:

Ext.MessageBox.show({
title: 'Error Alert',
msg: 'Here is an error message!',
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});

and voila! Now you have a alert box with title, text, and error Icon.

Unless you are visiting a strange web site you only see alert boxes to display error information.Replacing your alert calls with this code will be a boring task – instead you can add this code to the top of your page:

window.alert = function(str){
Ext.MessageBox.show({
title: 'Error Alert',
msg: str,
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
}

You have overwritten the default alert function, all calls to alert() will now show the fancy Ext alert box! The Ext alert box is HTML only, so you might need to replace \n with <br> if your alerts are multi lined

You can do much more with Ext and alert boxes, check it out here.

Tooltips

Tooltips are nice information messages that you can present to your visitors and the good news is that with Ext you can create them easily and automatically. The next example will show you how to automatically add tool tips to all img tags present in the page. For the tool tip text we will use the Alt attribute from the img tag

Ext.onReady(function(){

Ext.select('img').each(function(el){
var tt = new Ext.ToolTip({
target: el,
title: el.getAttribute('alt')
});
});

});

As you can see the code is inside the Ext.onReady function. This ensures the code is executed as soon as the DOM is ready. If you have code that needs to run on page load, this is the place to have it.

  1. The ext.select() function give us an array of all the matching DOM elements, so in our case returns an array with all the images in the page
  2. Each() iterates through an array applying a function to each element
  3. This way we can easily apply a tool tip to all images in the page
  4. For the tool tip text the value of the ALT attribute is used

As you might have noticed, with Ext almost all functions can be chained, making it easy and fast to develop

Forms

Forms are one of the most important components of a web site; be it a contact form, a checkout form, etc. We’ll now take a look how to create an Ext form and HTML markup. This way we are providing users with JavaScript enabled browsers an improved user experience but not excluding users unable to process JavaScript.

This is a bit trickier to achieve as we can not create forms directly from HTML markup. In this example we will create an Ext form with some validation but also provide a regular form if Javascript is disabled.


<form id="myfrm" action="save-form.php" method="POST"> <label for="txtName">Name</label>

<input name="txtName" type="text" /> <label for="txtFeedback">Your comment</label>
<textarea name="txtFeedback"></textarea>

<input type="submit" value="submit" /> </form>
<script type="text/javascript">// <![CDATA[

Ext.onReady(function(){

	var simple = new Ext.FormPanel({
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        width: 350,
        defaults: {width: 230},

        items: [
                new Ext.form.TextField({
                	fieldLabel: 'Name',
                	name: 'txtName',
                	allowBlank: false
                }),
                new Ext.form.TextArea({
                	fieldLabel: 'Your comment',
                    name: 'txtFeedBack'
                })
        ],

        buttons: [{
            text: 'submit',
        	handler: function(){
                if(simple.getForm().isValid()){
                	simple.getForm().submit();
                }
            }
        }]
    });

    simple.render('myfrm_ext');
	Ext.get('myfrm').remove();

});

// ]]></script>

Lets review the code step by step.

In the html portion a basic form we define two elements:

  1. The form that will be visible only to users without javascript enabled
  2. An empty div where we will attach our Ext Form

In the JavaScript portion we create an Ext form.

  1. The first block of options define things like the submission url, the form width and the default values to be applied to form elements
  2. The items option is where the fields are created, one text field and one text area, we also say that the text field must no be empty (allowBlank = false)
  3. In the buttons we add the submit button with an handler function. That function will be called when the button is pressed, and it will submit the form if it passes validation

If you are interested about forms take a look at the forms section in the samples, there is so much more you can with them

Conclusion

The goal of this article was to give you an introduction to Ext JS. By now you know all that you need to start adding some nice features to your web site. You can display fancy alert boxes, create eye catching forms, attach custom functions to DOM elements and also how to search and iterate through all of them.

About the Author

Nuno Franco da Costa is a web developer and sys admin. By day, he works at as team leader in a big web brand, building gaming sites for over 130 million of unique monthly visitors. He loves to code and has a “getting things done” attitude. You can find over at his online presence www.francodacosta.com

Related Posts:

Leave a Comment