 Code 

Categories Series

JAVA S C R I P T & A JA X

Dive into ExtJS 4

by Levi Hackwith 1 Aug 2011  0 Comments

Hey guys, Levi Hackwith here. Today, we're going to discuss version four
of the JavaScript framework, ExtJS. We're going to cover what it is, how
to install it, and then we're going to show off the power of ExtJS by
putting together a robust data grid using some sample data I've put
together.

This tutorial includes a screencast available to

Tuts+ Premium members.

Step 1 - What is ExtJS?

So let's begin by going over what ExtJS actually is. ExtJS, developed by a
company called Sencha, is a JavaScript framework specifically designed
for building web applications. The main difference between a JavaScript
framework like ExtJS and a JavaScript library like jQuery is ExtJS is
meant to be used to build entire applications - all the tools you need are
found within the framework - while jQuery is designed to be put into an
existing site to add functionality.

"The main difference between a JavaScript

framework like ExtJS and a JavaScript library
like jQuery is ExtJS is meant to be used to
build entire applications - all the tools you
need are found within the framework - while
jQuery is designed to be put into an existing
site to add functionality.."
Step 2 - Install ExtJS
To install ExtJS, we'll first need to download it from the Sencha website.
Head over to http://www.sencha.com/products/extjs and click on the
"Download" button in the upper right-hand corner. On this page, you'll
see a section titled "Working in Open Source?" followed by a link to
download ExtJS 4.0.2a - the latest version. Go ahead and click that link
and the download will begin shortly. Now, you'll notice that the
download is quite large, over 30 megabytes. This is because the zip file
you downloaded not only contains the ExtJS framework files, but all of
the examples and documentation that you'll find on the Sencha website
as well. In addition it also contains multiple versions of the framework:
one that's fully documented and uncompressed for development use and
one that's been minified and compressed for use on production systems.
Once the zip file is downloaded, extract its contents and take the folder
it creates and upload it to your website, like I have here. Notice I've
renamed the folder to just "extjs" - all lowercase. This will make it easier
to reference later.

Now that we've gone over some background information and got the
Framework uploaded to our website, let's start coding. Now as you can
see from the project files over here on the left, I've already set up a basic
folder structure for our application as well as create an index.html page
and a blank script.js JavaScript file. The HTML page is where we're going
to include all of the necessary scripts we uploaded earlier and the
JavaScript file is where we're going to put all of our application code.
Step 3 - Include the Necessary Files

01 <h
ht m l >
02 <h he a d >
03 <sst y l e >
04 </s st y l e >
05 <tti t l e ></tti t l e >
06 <mme t a charset=UTF-8">
07 </h he a d >
08 <b bo d y >
09 </b bo d y >
10 </hht m l >

Let's begin by opening up the index.html file. As you can see, I've
already set up a basic HTML page using the HTML5 doctype. Now I'm
going to tell you about the necessary files you'll need to create an ExtJS
application as well as how to include them.

The CSS File

The first thing we'll want to include is the CSS file. Without this file, our
application isn't going to look right when it renders.

01 <h
ht m l >
02 <h he a d >
03 <sst y l e >
04 @import url('extjs/resources/css/ext-all.css');
05 </s st y l e >
06 <tti t l e ></tti t l e >
07 <mme t a charset=UTF-8">
08 </h he a d >
09 <b bo d y >
10 </b bo d y >
11 </hht m l >

The JavaScript Files

Next we need to include the necessary JavaScript files. The first file
we're going to include is ext-all-debug; this is the entire ExtJS library,
uncompressed. Second, we want to include our script.js file. Remember
that this is the file all of our application code is going to go into.

01 <h
ht m l >
02 <h he a d >
03 <ssc r i p t type = "text/javascript" src = "extjs/ext-al
04 <ssc r i p t type = "text/javascript" src = "script.js"
05 <sst y l e >
06 @import url('extjs/resources/css/ext-all.css');
07 </s st y l e >
08 <tti t l e ></tti t l e >
09 <mme t a charset=UTF-8">
10 </h he a d >
11 <b bo d y >
12 </b bo d y >
13 </hht m l >

Full Screencast
 10:11

Step 4 - Declare the Grid and Fire When

Ready!
Now that we've includes all the necessary files, let's start coding. The
first thing we want to do is make sure that all the code we write fires
after the web page has finished loading, so we'll wrap all of our code in a
call to the Ext.onReady function. Add the following to the script.js file:

1 Ext.onReady(f
fu n c t i o n () {
2 });

Now, there's two things I want to point out about this piece of code: first
off, we're passing in an entire function into a method call (onReady).
This is what's called a callback: a function that gets called as soon as
another task is complete - in our case, the page finished loading.
Second, you'll notice that I prefaced this method call with "Ext" This is
called a namespace. A namespace is a way of containing variables and
methods into separate containers in order to prevent things like variable
collision. ExtJS relies heavily on namespaces in order to work properly.
In fact, every method call in ExtJS is contained in - at a minimum - one
namespace: Ext. You'll be exposed to more complex examples of
namespace usage as we progress through this tutorial.

Okay, now that we've set up our onReady method, let's declare our
dataGrid. Update your script.js file with the following:

1 Ext.onReady(f
fu n c t i o n () {
2 Ext.create('Ext.grid.Panel', {
3 });
4 });

Here we are declaring a new instance, or copy, of an ExtJS data grid by

passing the complete namespace 'Ext.grid.Panel' to the "create"
method. Now, you'll also notice the empty braces I passed in. In
JavaScript, a pair of empty braces signifies an empty object. In ExtJS,
when you create a data grid (or any other object) using the "create"
method, you need to pass in the settings or - in ExtJS terms - the
configuration for that object by passing in a JavaScript object with
properties representing the properties of the grid we're creating. Now if
that sounds a little confusing, it'll make more sense as I go forward and
configure the data grid. Let's go ahead and do that now:

1 Ext.onReady(f
fu n c t i o n () {
2 Ext.create('Ext.grid.Panel', {
3 store: Ext.create('Ext.data.Store', {})
4 });
5 })

Step 5 - Fill the Grid - Declare a Data Store

As you can see, we've added a property called 'store' to our data grid
and assigned an instance of a new object to it - a store. In ExtJS, the
purpose of a data grid is to display data, and that data has to come from
somewhere: a store.

A store is, for the most part, just a collection of records. A more
real-world example of this might be the contact app in your smartphone.
The part of the app that lets you see your contacts is the grid and the
part of the app that populates that list of contacts is the store.

Step 6 - Adding Fields to a Store

01 Ext.onReady(f
fu n c t i o n () {
02 Ext.create('Ext.grid.Panel', {
03 store: Ext.create('Ext.data.Store', {
04 fields: [{
05 name: 'id',
06 type: 'int'
07 }, {
08 name: 'first_name',
09 type: 'string'
10 } ,{
11 name: 'last_name',
12 type: 'string'
13 }, {
14 name: 'dob',
15 type: 'date',
16 dateFormat: 'Y-m-d'
17 }]
18 })
19 });
20 });

As you can see, we've added a property called "fields" to our store
object. Fields are like the column headings in a spreadsheet. If each row
in the spreadsheet is one record, each column - or field - in the
spreadsheet, represents some property of that record. For our example
today, we're going to be making a data grid full of contacts so each
record in the store is going to have: an ID which simply provides a
unique identifier for each record, a first name, a last name, and a date of
birth. Now as you can see, for each field we've specified a 'name'
property and a 'type' property. These properties are pretty straight
forward: we're just telling our store what kind of field it is and what it
should be called. Now, when you get down to the dob - or date of birth -
field, you'll notice we've set a type of 'date' to signify a date field -
nothing really out of place there - but we've also added a 'dateFormat'
property. This property tells the store that the dob field will store its date
value in year, month, day format. This may seem odd now but it'll
become quite important once we start setting up the rest of the grid.
Step 7 - Fill the Store with Data
Now that we've set up our store and added some fields, let's go ahead
and populate it with data:

01 Ext.onReady(f
fu n c t i o n () {
02 Ext.create('Ext.grid.Panel', {
03 store: Ext.create('Ext.data.Store', {
04 fields: [{
05 name: 'id',
06 type: 'int'
07 }, {
08 name: 'first_name',
09 type: 'string'
10 } ,{
11 name: 'last_name',
12 type: 'string'
13 }, {
14 name: 'dob',
15 type: 'date',
16 dateFormat: 'Y-m-d'
17 }],
18 data: [{
19 'id': 1,
20 'first_name': 'John',
21 'last_name': 'Smith',
22 'dob': '1950-03-04'
23 }, {
24 id: 2,
25 'first_name': 'Jane',
26 'last_name': 'Doe',
27 'dob': '1960-07-24'
28 }]
29 })
30 });
31 });

Basically, what we've done here is fill our store with sample data using
the fields we defined earlier as a template. If you look close, you'll notice
that the property names in the data match the field names in the 'fields'
property of the store. This is called 'mapping'. We're mapping the data
from the data property, to its associated fields in the 'fields' property of
the store. Also note how we've made sure to make the data types of the
data match the data types of the store. If you get them mixed up things
may not load properly.
Step 8 Add Columns to the Grid
Okay, that's all we need to do to configure out grid's store so let's get
back to configuring the grid itself. The next thing we want to set up in
our grid is the columns. This is exactly what it sounds like: we're going
to be setting up what columns will be displayed when our grid loads.

01 Ext.onReady(ffu n c t i o n () {
02 Ext.create('Ext.grid.Panel', {
03 width: '30%',
04 store: Ext.create('Ext.data.Store', {
05 fields: [{
06 name: 'id',
07 type: 'int'
08 }, {
09 name: 'first_name',
10 type: 'string'
11 } ,{
12 name: 'last_name',
13 type: 'string'
14 }, {
15 name: 'dob',
16 type: 'date',
17 dateFormat: 'Y-m-d'
18 }],
19 data: [{
20 'id': 1,
21 'first_name': 'John',
22 'last_name': 'Smith',
23 'dob': '1950-03-04'
24 }, {
25 id: 2,
26 'first_name': 'Jane',
27 'last_name': 'Doe',
28 'dob': '1960-07-24'
29 }]
30 }),
31 columns: [{
32 header: 'ID',
33 dataIndex: 'id'
34 }, {
35 header: 'First Name',
36 dataIndex: 'first_name'
37 }, {
38 header: 'Last Name',
39 dataIndex: 'last_name'
40 }, {
41 header: 'Date of Birth',
42 dataIndex: 'dob',
43 format: 'm/d/Y',
44 xtype: 'datecolumn'
 45 }]
46 });
47 });

Just like we did before, we've declared the property - "columns" - and
passed in an array of objects, each object representing a single column
in the grid. Notice how each column contains at least two properties:
'header' and 'dataIndex'. Header specifies what gets displayed as the
column header in the grid (what the user will see); dataIndex maps that
column to a particular field in the store. And that's it! That's all you need
to do to build a data grid.

Step 9 Display the Grid

Before we can say we're completely done, however, we need to render
the grid to the screen. To do that, let's store our grid in a variable we can
reuse later:

1 ...
2 v a r grid = Ext.create('Ext.grid.Panel', {
3 ...

All we're saying here is "Grid, render to the body of the HTML document"
- Pretty straight forward. Go ahead and refresh our index.html file and
see how we did. As you can see, in under 30 minutes we've created a
robust data grid that has all these features: we can show and hide
columns, we can sort the data and we can rearrange the columns. That's
the power of ExtJS!
 Advertisement

Review
In Review, we discussed what ExtJS is, the difference between a library
and a framework, how to download and install ExtJS, and we discussed
how to define and configure an ExtJS object - in this case a data grid.

Where to find more information

If you'd like to learn more about ExtJS and read up on the
documentation, I highly suggest you go to the sencha.com website and
look at their API docs for ExtJS 4. Here you'll find all the information you
need to start developing your own applications. If you get stuck, you can
check out the sencha.com forums and ask them for help, or any other
programming site that has a message board.
 Advertisement

Di�culty:
Intermediate
Length:
Short
Tagged with:

JavaScript & AJAX Premium

Download Attachment 

About Levi Hackwith

N/A

Join Olive Oil

Revolution
facebook.com/RevolusiOliveOil

Healthy Oil with Great Quality &

Flavor. Be a part of the Revolution

Advertisement
Related Posts

Single Page ToDo Application With Backbone.js

16 days ago • Join me as I walk you through creating models, collections, views,
events, and a router to build ...

Setting Up Firebase for Your Next Project

1 month ago • Creating real-time applications is not always the easiest task;
however, thanks to APIs like Fire...

Working With Intl

12 May 2014 • Adding internationalization to your web application is easier than
ever with the new Intl API. Le...

Creating Upcoming Events Plugin in WordPress: Custom Post Type and

the Dashboard
1 May 2014 • In the previous part of the series, we planned the basic structure
and working of our plugin. We ...

Object-Oriented Programming in WordPress: Scope

22 Apr 2014 • In continuing our discussion of object-oriented programming in
WordPress, we need to begin talkin...

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

14 Apr 2014 • Flexboxgrid is a new framework which allows you to combine the
predictability and common language...
0 Comments Tuts+ Premium d Login

Sort by Best Share ⤤ Favorite ★

✉ Subscribe d Add Disqus to your site

Advertisement

Teaching skills to millions worldwide.

 Tutorials
 Courses

 eBooks

 Jobs

 Blog

Follow Us

 Subscribe to Blog

 Follow us on Twitter

 Be a fan on Facebook

 Circle us on Google+

 RSS Feed

Add more features to your website such as

user profiles, payment gateways, image
galleries and more.

Browse WordPress Plugins

Microlancer is now Envato Studio! Custom

digital services like logo design, WordPress
installaton, video production and more.

Check out Envato Studio

About Blog   
Pricing FAQ

Support Write For Us

Advertise Privacy Policy

Terms of Use

© 2014 Envato Pty Ltd.