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
<html>
<head>
<style>
</style>
<title></title>
<meta charset=UTF-8">
</head>
<body>
</body>
</html>
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.
<html>
<head>
<style>
@import url('extjs/resources/css/ext-all.css');
</style>
<title></title>
<meta charset=UTF-8">
</head>
<body>
</body>
</html>
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.
<html>
<head>
<script type = "text/javascript" src = "extjs/ext-all-debug.js"></script>
<script type = "text/javascript" src = "script.js"></script>
<style>
@import url('extjs/resources/css/ext-all.css');
</style>
<title></title>
<meta charset=UTF-8">
</head>
<body>
</body>
</html>
Full Screencast
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:
Ext.onReady(function() {
});
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:
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
});
});
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:
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.Store', {})
});
})
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
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.Store', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
} ,{
name: 'last_name',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}]
})
});
});
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:
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.Store', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
} ,{
name: 'last_name',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}],
data: [{
'id': 1,
'first_name': 'John',
'last_name': 'Smith',
'dob': '1950-03-04'
}, {
id: 2,
'first_name': 'Jane',
'last_name': 'Doe',
'dob': '1960-07-24'
}]
})
});
});
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.
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
width: '30%',
store: Ext.create('Ext.data.Store', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
} ,{
name: 'last_name',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}],
data: [{
'id': 1,
'first_name': 'John',
'last_name': 'Smith',
'dob': '1950-03-04'
}, {
id: 2,
'first_name': 'Jane',
'last_name': 'Doe',
'dob': '1960-07-24'
}]
}),
columns: [{
header: 'ID',
dataIndex: 'id'
}, {
header: 'First Name',
dataIndex: 'first_name'
}, {
header: 'Last Name',
dataIndex: 'last_name'
}, {
header: 'Date of Birth',
dataIndex: 'dob',
format: 'm/d/Y',
xtype: 'datecolumn'
}]
});
});
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:
...
var grid = Ext.create('Ext.grid.Panel', {
...
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!
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.
Comments