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);
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>
Tags: 
Interesting! And that looks pretty cool. Your code is a lot less pretty though – instead of returning objects to render you’re having to construct a string from the data. I guess that’s the price you pay for needing to convert to a client side syntax for extjs consumption?
Jon: I totally agree re: the construction of the data string, which is why I’m looking for alternative methods. Using apex:repeat tags (as mentioned here: http://techblog.appirio.com/2008/07/extending-visualforce-ui-ext-js.html) is essentially the same approach, but it’s easier to escape characters (IMO) on the server side.
Looks Nice, glad to see the integration of Ext JS coming along. Wish I were more familiar with Visual Force. Is there any slick way to get remote grids set up? Perhaps one page that grabs any count/limit parameters and spits out just a set of json data. Then you could swap in a JsonStore instead of just the simple store’s and could support paging or filtering.
[...] 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: [...]