From Learn About the Ext JavaScript Library

For the past several months I have explored using the ExtJS library of components. After many false starts along the way, and long periods of trial and error, I've finally come to better understand the library and its implementation. Now I want to share that with everyone, as simply as I can, so that you might not struggle as I have. This series will deal with creating your own DataGrid, and be broken up in a way so as to explain the various parts needed.

Setting Up

So, off we go. First things first, you'll need the JQuery and ExtJS libraries. Why JQuery? Well, because that's what I used, but you could just as easily use Prototype or YUI. I also found out (the hard way, since it's not in the install notes) that you'll need the Dimensions JQuery Plugin. The full ExtJS download contains the project core files, JS library 'adapter' files, all of the Ext components, examples, documentation, and a 'resource' directory of images and stylesheets to help you get started.

I start off by placing the necessary script tags in the header of my document. Order of placement is important.

<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/plugins/dimensions.js"></script>
<script type="text/javascript" src="js/ext-1.0/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="js/ext-1.0/ext-all.js"></script>
// This is our custom script file
<script type="text/javascript" src="js/paging.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

Now, for reference, you don't need the 'all' ext library for this to work, but I'm just doing personal testing right now and figured that it's easier than breaking things out at this point. The 'all' library is the complete component collection, core, and utilities within one script file. While nice to have it all, it is large, and you can use just the components you need. The 'Build your own Ext' section of the ExtJS site can show you all of the necessary dependencies to put together only what you need.

I'm going to copy the paging.js file out of the ExtJS example directory and place it in the root of my js directory. I'm going to adjust this existing file to create my first paging grid. I know that this works, so I might as well not re-write the wheel. You'll have also noticed that I used the included stylesheet file from the resources directory. Now, with all of this in place, all I need is my container div that will hold my DataGride. In the body of my document I place the following container code:

<div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div>

And that's the end of the initial setup. Take a good look at the 'examples' directory in your ExtJS download, as well as the API and Examples section of Learn area of the ExtJS site. Also, included in the download you will find the complete document we created today.

• Ext Programmer's API Documentation
• Ext User Forums