Extending Visualforce's UI – Ext JS DataGrid

July 26, 2008 Appirio

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:

StaticResourcesReferencing 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.


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 component to read as follows.

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 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 component to build out our DataStore. Typically, the use case for the component would be to build out repeating UI elements. In this situation we’re using it to build out our

grid.render('myContactList-grid');
grid.getSelectionModel().selectFirstRow();
});

Don't Forget the DataGrid

Add the following

tag and click Save to view your new Ext JS driven DataGrid.

ExtJSDataGrid_Part1_Complete

Previous Article
Google Geocoding from Visualforce
Google Geocoding from Visualforce

Kyle Roche Mashups are becoming a common part of most implementations. Replacing legacy applications are so...

Next Article
Extending Visualforce's UI – Series Intro
Extending Visualforce's UI – Series Intro

KyleRoche Welcome to the first in an on-going series of postings exploring the several approaches that are ...