Extending Visualforce's UI - Ext JS DataGrid

	Frank Hansen			Kyle Roche

In this posting we're going to use the Ext JS library to build out a custom DataGrid in a Visualforce page. Ext JS is a JavaScript library for building richer UI layers with out the need for plug in technologies. Ext JS has some fantastic UI widgets and Open Source licenses are available.

This technique will use the Simple Data Store. In future postings we'll build on this with examples using JSON and other technologies. The first step is to download the latest version of the Ext JS SDK. We're going to upload the archive as a Static Resource so we can reference it from within our Visualforce application. Remember, there's a 5MB per file limit on Static Resources so make sure you remove the sample directory from the SDK before trying to upload it as a Static Resource. Your upload resource should look like this:

Referencing a Static Resource
Static Resources can be referenced by using the $Resource global variable. Archives are especially interesting because you can reference the full path to a file within an archive saving you countless effort organizing your uploads. We'll be referencing the following resources for this example.

StyleSheet: /ext-2.1/resources/css/ext-all.css
JavaScript: /ext-2.1/adapter/xt/ext-base.js
JavaScript: /ext-2.1/ext-all.js

Creating the Visualforce Page
First, make sure you have development mode enabled. Setup | My Personal Information | Personal Information | Development Mode. Create a new Visualforce page by redirecting your browser to http://server.salesforce.com/apex/ExtJs_DataGrid_Part1. Follow the prompt to create your page. Development mode enables two things in your org. First, you now have the ability to create a page via the URL, as you've just done. Secondly, you now have the ability to edit Visualforce pages from within your browser. In the bottom left of the browser click on Page Editor to open the Visualforce Editor. Add the following code to reference our Static Resources with our Ext JS library.

<link rel="Stylesheet" type="text/css" href="{!$Resource.ExtJs}/ext-2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="{!$Resource.ExtJs}/ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="{!$Resource.ExtJs}/ext-2.1/ext-all.js"></script>

Click Save. Our page is now referencing the three static resources within the archive we uploaded. Note the use of the $Resource variable in our data binding calls.

Gathering Some Sample Data
Ext JS' "Simple Data Store" is built by constructing a string based Array which we'll bind our DataGrid. Let's create a customer controller to retrieve the data for our Visualforce page. In the Page Editor change the <apex:page> component to read as follows.

<apex:page sidebar="false" controller="ExtJSDataGrid1Controller">

You will see an option above the toolbar in the Editor to create a new APEX Class. After clicking that link you should see a new button next to Page Editor called Controller. Open the code for the Controller and paste in the following. Note the use of the Apex Property in place of the traditional getter and setter methods. This is new to Summer 08.

public class ExtJSDataGrid1Controller {
public List<Contact> myContacts {
get {
if (myContacts == null) {
myContacts = [SELECT Id, FirstName, LastName FROM Contact LIMIT 10];
}
return myContacts;
}
set;
}
}

Adding Ext JS to our Visualforce Page
Now that we have our SOQL query returning 10 Contact records we're going to add the JavaScript to generate our Ext JS DataGrid. Paste the code below into the Page Editor. Note our use of the <apex:repeat> component to build out our DataStore. Typically, the use case for the <apex:repeat> component would be to build out repeating UI elements. In this situation we're using it to build out our <script> for the rendered page.

<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myDataString = 'var myData = [ ';
<apex:repeat value="{!myContacts}" var="con" id="ContactRepeat">
myDataString += "['{!con.Id}','{!con.FirstName}','{!con.LastName}'],";
</apex:repeat>
myDataString += "['','',''] ];";
eval(myDataString);
var store = new Ext.data.SimpleStore({fields:[{name:'ID'},{name:'FirstName'},{name:'LastName'}]});
store.loadData(myData);
// CREATE THE GRID
var grid = new Ext.grid.GridPanel({store: store, columns: [
{id: 'ID', header: "ID", width: 50, sortable: true, dataIndex: 'ID'},
{id: 'FirstName', header: "First Name", width: 150, sortable: true, dataIndex: 'FirstName'},
{id: 'LastNme', header: "Last Name", width: 150, sortable: true, dataIndex: 'LastName'}
],stripeRows:true, autoExpandColumn: 'ID', height: 500, width: 1000, title: 'MY EXT JS CONTACT LIST'});

grid.render('myContactList-grid');
grid.getSelectionModel().selectFirstRow();
});
</script>

Don't Forget the DataGrid

Add the following <div> tag and click Save to view your new Ext JS driven DataGrid.
<div id="myContactList-grid"></div>