Developer

Develop slick Web interfaces with Ext JS

Tony Patton offers a closer look at Ext JS, a JavaScript framework that provides the foundation for building Web applications with powerful user interfaces.

With all of the work that piles up on my plate, I have to be discerning about which new Web development offerings I test drive; this is especially true for Web development frameworks. Based on the abundance of positive information I heard about Ext JS, I decided to take a closer look at the JavaScript development framework. Ext JS provides the foundation for building Web applications with powerful user interfaces.

A little background about Ext JS

The driving force behind Ext JS is Jack Slocum, who is a respected JavaScript developer. The Ext JS project sprouted from a desire to extend functionality offered by the Yahoo! User Interface (YUI) Library. A key aspect of the YUI Library is the cross-browser support, which you'll also find in Ext JS. This allows you to build Web applications without worrying about the target browser.

Ext JS boasts excellent performance. The framework is fully object-oriented and extensible. Along with its excellent presentation, Ext JS's features are ready to use once you download and install it.

Features

Ext JS includes various controls such as a message box, combo box, data grid, and toolbars. In addition, layout managers allow you to specify how elements are presented on a page. More features are available for working with forms and windows.

The include order for the JavaScript files can change if you are using other frameworks (e.g., jQuery, YUI, or scriptaculous), but standard use of Ext JS has the following include order:

ext-base.js
ext-all.js (or your choice of files)

The ext-all.js file may be referenced as listed, or you may opt to only include the file(s) necessary for the elements used in your application. The file INCLUDE_ORDER.txt is installed in the base installation directory. It spells out the include order when using other JavaScript libraries in conjunction with Ext JS.

An example using the Grid control

One of the features that attracted me to Ext JS is its powerful Grid control. It allows you to display data from a backend data source (MySQL examples included) along with other structured data like XML and arrays.

The next example listing demonstrates using the Grid control with a data source defined in a JavaScript array. The top part of the example page loads the base Ext JS script libraries along with the CSS used by Ext JS's various features.

The Grid control is populated with a JavaScript array. The array contains data about Web sites (i.e., site name and URL, along with an identifying number). This data is loaded into a SimpleStore object, which is found in the Ext JS framework. A new GridPanel is created, and the previously created data store (from the array) is assigned as its data source. The GridPanel's render method displays it on the page.

An interesting feature of this example is the onReady method that kicks off script execution on the page. This important Ext JS event is fired when all scripts have been loaded on the page, so it signals that it is okay to move forward with Ext JS code, as all code is available. If you adopt Ext JS, it will become second nature for you to use the onReady method.

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Array Grid Example</title>

<link rel="stylesheet" type="text/css" href="ext-2.0.1/resources/css/ext-all.css" mce_href="ext-2.0.1/resources/css/ext-all.css" />

<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js" mce_src="ext-2.0.1/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-2.0.1/ext-all.js" mce_src="ext-2.0.1/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

 var myData = [

['TechRepublic','http://www.techrepublic.com/',1],

['CNET','http://www.cnet.com/',2],

['GameSpot','http://www.gamespot.com/',3],

['News','http://www.news.com/',4]

];

var store = new Ext.data.SimpleStore({

fields: [

{name: 'Site'},

{name: 'URL'},

{name: 'ID'}

]});

store.loadData(myData);

var grid = new Ext.grid.GridPanel({

store: store,

columns: [

{id:'ID',header: "ID", width: 16, sortable: true, dataIndex: 'ID'},

{header: "Site", width: 70, sortable: true, dataIndex: 'Site'},

{header: "URL", width: 200, sortable: true, dataIndex: 'URL'} ],

stripeRows: true,

height:150,

width:280,

title:'Grid Example' });

grid.render('sample-grid');

grid.getSelectionModel().selectFirstRow(); });

</script></head>

<body>

<h1>Array Example</h1>

<div id="sample-grid"></div>

</body></html>

The Grid control offers a slick presentation to go along with its powerful data support. While this is a simple example, it gives you a peek at what you can accomplish with Ext JS.

How to get Ext JS

You can download Ext JS 2.0.1 from the Ext JS site. The download is comprised of one zip file, which contains everything you need to use the framework; this includes the entire framework, as well as all source files. The files are easy to install on a Web server for testing.

On my development server, I unzipped the download file and copied the Ext JS directory and its contents to my IIS server. The complete local path to my test installation is c:\inetpub\wwwroot\ext-2.0.1. There are additional subdirectories for documentation, examples, source code, and more.

As a client-side framework, Ext JS supports any server platform that can process POST requests and return structured data. On the server side, there are different options for handling backend tasks. Ext JS's manual provides additional information.

As far as licensing goes, a couple of options are available for using Ext JS in your applications; this includes an open source model, as well as commercial licenses. In addition, support is available freely in the Ext JS site's forum, and there is also a pay model.

Learn more about Ext JS

Ext JS's documentation is impressive, which is something you usually don't find with such tools. There is extensive documentation available online, along with what is included in the download.

While JavaScript is at the core of Ext JS, it takes a bit more than JavaScript skills to use it properly. Fortunately, the Ext JS site offers various options for learning more about the framework. In addition to the previously mentioned documentation, the download includes an examples directory, which has sample code that takes advantage of Ext JS features. Also, the Web site offers various tutorials and other learning aids.

Simplification

Every Web development framework promises to simplify and streamline application development, but many fall short of that goal. Ext JS keeps its promise with an easy-to-use development model. It also continues to evolve, with new features and enhancements on the horizon.

Do you use any particular JavaScript frameworks in your Web applications? If so, share your experience with the Web Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

———————————————————————————————————————————-

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

About Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks

Free Newsletters, In your Inbox