extjs & visualforce

Posted by in salesforce, visualforce

I’m interested to hear how people are utilizing extjs in their visualforce pages. I’ve found it very helpful to use Apex to generate the store on the server side, then pass it along to the Visualforce page via a hidden input to be handled on the client side (rather than use the apex:repeat tags).

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);                            
		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;

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