Rich Waters’ comment on my first post re: Ext JS & visualforce got me thinking about the possibilities of leveraging JSON in Ext JS components within Visualforce, so I implemented a paging grid, similar to this example provided by Ext JS. OK, enough of the formalities, I suppose people want to see what kind of development ensued:

First, the product, a JSON-based Ext JS paging grid:

Now, for the magic behind the grid, the JSON file (a Visualforce page called “Json_test”):

<apex:page contentType="text/html" showHeader="false" controller="Json_File" >
	<apex:outputText value="{!json}" />
</apex:page>

The controller (spits out the JSON):

public class Json_File {

	public string json {get;set;}

	public Json_File() {
        opportunity[] opps = new opportunity[]{};

	integer start = 0;
	integer pageSize = 10;

	if (ApexPages.currentPage().getParameters().get('start') != null && ApexPages.currentPage().getParameters().get('limit') != null) {
		start = integer.valueof(ApexPages.currentPage().getParameters().get('start'));
		pageSize = integer.valueof(ApexPages.currentPage().getParameters().get('limit'));
	}

        string jsonRecordsString = '';

        integer i = 1;
        integer j = 0;

        for (Opportunity o : [Select id, name, stagename, closedate from opportunity order by name limit 1000]) {
			if (j >= start) {
				if (i <= pageSize) {
					jsonRecordsString += '{';
					jsonRecordsString += '"id":' + '"'+o.id+'",';
					jsonRecordsString += '"name":' + '"'+o.name+'",';
					jsonRecordsString += '"stagename":' + '"'+o.stagename+'",';
					jsonRecordsString += '"closedate":' + '"'+o.closedate+'"';
					jsonRecordsString += '},';
					i++;
				}
			}
			opps.add(o);
			j++;
        }

		string jsonString = '({"total":"'+opps.size()+'", "results":[' + jsonRecordsString + ']})';
        jsonString = jsonString.replaceAll(',]',']');
        this.json = jsonString;
	}
}

<script type="text/javascript">
	var opportunity_grid;

	Ext.onReady(
		function() {
			//prevents mixed content message in ie
			Ext.BLANK_IMAGE_URL = '/s.gif';
			Ext.SSL_SECURE_URL = '/s.gif';
			render_queue();
		}
	);

	function render_queue() {
		// create the data store
		var store = new Ext.data.JsonStore({
			totalProperty: 'total',	// total data, see json output
			root: 'results',	// see json output
			url: 'http://crmmanager-developer-edition.na6.force.com/test/Json_test',
	        fields: [
	           {name: 'id'},
	   			'name', 'stagename', 'closedate'
       		]
   		});

		var pagingBar = new Ext.PagingToolbar({
	        pageSize: 10,
	        store: store,
	        displayInfo: true,
	        displayMsg: 'Displaying opportunities {0} - {1} of {2}',
	        emptyMsg: "No opportunities to display"
	    });

		var gridView = new Ext.grid.GridView({
				forceFit: true
		}); 

	    opportunity_grid = new Ext.grid.GridPanel({
	        store: store,
	        columns: [
	            {header: "name", width: 150, dataIndex: 'name', sortable: true},
	            {header: "stage", width: 150, dataIndex: 'stagename', sortable: true},
	            {header: "close date", width: 150, dataIndex: 'closedate', sortable: true}
	        ],
	        width:580,
	        height:300,
	        loadMask: true,
	        bbar: pagingBar,
	        view: gridView,
	        layout: 'fit'
	    });
		try {
			opportunity_grid.render('opportunity_grid');
		} catch(e){}	

		store.load({params:{start:0, limit:10}});
	}
</script>

As you can see, the Json_File controller accepts two params (start, pageSize), which are sent from the store in store.load() to manage the index of the query and the number of records returned. Unfortunately, Salesforce does not provide an “INDEX” keyword in SOQL, which would make this pagination much more “resource respectful” (each time page up/page down is called from the paging grid, we receive a full dataset from Salesforce which, as you might guess, can be dangerous for tables with more than a thousand records).

I looked into the possibility of leveraging StandardSetController, but given the out-of-box architecture of the paging grid, we’d still be calling our JSON controller each time the grid was “paged”, which effectively calls the entire dataset.

I’m open to ideas, so please weigh in.

EDIT: the source for the above example…
ExtJs_Json_Grid.page
Json_Controller.cls
Json_test.page

Note: once again, the grid below is a live Visualforce page from my developer Force.com site embedded into this post

public class Grid_Controller {
	public string store {get;set;}
	public list<QueueItem> queueitems {get;set;}
	string userId = UserInfo.getUserId();

	public Grid_Controller() {
		queueitems = new queueitem[]{};
		for (Custom_Process_Instance__c cpi : [Select Owner.Name, Opportunity__r.Name, Opportunity__r.Id, (Select Id From Custom_Process_Instance_Step__r where Status__c != 'Completed' AND Status__c = 'Pending' limit 1), Percent_Complete__c, Process_Age__c from Custom_Process_Instance__c where Status__c = 'Pending' AND Opportunity__c != null and IsDeleted = false order by CreatedDate asc]) {
            		QueueItem qi = new QueueItem(cpi);
            		queueitems.add(qi);
		}        

		string myDataString = 'var myData = [ ';
		for(queueitem q : this.queueitems) {
			string showIcon = '';
			if (q.ProcessInstance.Custom_Process_Instance_Step__r.size() == 1)
        			showIcon = 'yes';

			string oppId = q.ProcessInstance.Opportunity__c;
			string oppName = q.ProcessInstance.Opportunity__r.Name;
			string launchedby = q.ProcessInstance.Owner.Name;
			double percent = q.ProcessInstance.Percent_Complete__c;
			double ageInMinutes = q.ProcessInstance.Process_Age__c;

			if (q.ProcessInstance.Opportunity__r.Name != null)
				oppName = string.escapeSingleQuotes(q.ProcessInstance.Opportunity__r.Name);
			if (q.ProcessInstance.Owner.Name != null)
				launchedBy = string.escapeSingleQuotes(q.ProcessInstance.Owner.Name);

			myDataString += '[\''+showIcon+'\',\''+oppName+'\', \''+oppId+'\',\''+launchedBy+'\',\''+percent+'\',\''+ageInMinutes+'\'],';
		}

		myDataString += '];';
		myDataString = myDataString.replace(',];', '];');
		this.store = myDataString;
	}

	public class QueueItem {
		public Custom_Process_Instance__c ProcessInstance {get;set;}
		public QueueItem(Custom_Process_Instance__c cpi) {
			this.ProcessInstance = cpi;
		}
	}
}

<script type="text/javascript">
	var myDataString = document.getElementById('{!$Component.myForm.dataStore}').value;
</script>

<apex:form id="myForm">
	<apex:inputHidden value="{!store}" id="dataStore"/>
</apex:form>