+ Start a Discussion

EXTJS and Visualforce



EXTJS library is being used by many people these days to enhace the standard VF functionality.

Here is one example of how to create a EXTJS Datagrid in a VF page (from Appirio):  link


My question is related to the interaction between different pieces used in the approach: Apex (Controller) <-> Visualforce components <-> EXTJS components:


1. The first type of interaction is following:


a. Apex fetches data  (either SFDC data or makes a WS callout to get data)

b. Visualforce components, such as <apex:repeat> are involved into formatting the data to be provided to EXTJS component

c. EXTJS component shows data that was formatted properly using Visualforce components (you'll get a better understanding if you look at a link above)


2. Second type of interaction is the point where questions comes: when data is displayed within EXTJS components, how do we link events that happen on EXTJS components to Apex? To make it clear, here is an example:


There is a <apex:commandButton> Visualforce component that has an 'action' attribute that links to a method within a Controller. Whenever a user presses the button a method is invoked. - this is all clear because we are using Visualforce only.

However, when it comes to EXTJS - its components have their own buttons and links, or any other GUI controls that can generate events. The question is - how to link a button on EXTJS component to a method within a Controller?


Generally speaking, the question would sound like: "How to link events, such as button clicks, in a custom javascipt code to a method within a Controller?"




Many thanks!

Best Answer chosen by Admin (Salesforce Developers) 



Thanks a lot, this is very helpful!

Having an example would be very appreciated.

All Answers


In general I would recommend making sure that you abstract your use of Ext.js (or any widget library like this) using custom components to help manage and contain some of the complexity. As for invoking action methods on your controller and also bidirectional value binding you'll want to leverage apex:actionFunction and apex:inputHidden respectively.


For example, in my own work on some of our next generation components (no ETA on public release for this work yet, sorry) I went as far as to create a couple of components using the Visualforce CDK that abstract out bidirectional and heirarchical data store creation and synchronization which then allowed me to leverage Ext.js client side MVC/data binding with Ext.js components such as EditableGridPanel in a seemless manner.


I'll post a simple example of an Ext.js based button component that is the equivalent of apex:commandButton.

Message Edited by dchasman on 01-24-2009 09:13 AM



Thanks a lot, this is very helpful!

Having an example would be very appreciated.

This was selected as the best answer

The sample link doesn't work. Can you show me some other sample to mix ExtJs and visualforce?


Thanks very much.


My gmail is kunlun.software@gmail.com

I want to replace {!xx.xxxx} with <Apex:inputField value="{!xx.xxx}, I tried but failed. Can you help me to solve it?

My code is below:

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

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

<script type="text/javascript">
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myDataString = 'var myData = [ ';

<apex:repeat value="{!myContacts}" var="con" id="ContactRepeat">
myDataString += "['{!con.Id}','<apex:inputField value="{!con.FirstName}"/>
myDataString += "['','',''] ];";

var store = new Ext.data.SimpleStore({fields:[{name:'ID'},{name:'FirstName'},{name:'LastName'}]});

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


<div id="myContactList-grid"></div>





What you showed in your example does not make any sense - apex:inputField cannot be used in this fashion.


If what you are attempting is to provide bidirectional data binding between Ext.js components and VF you are getting into something that is fairly complicated and will require a high level of skill in both Ext.js and VF. The basic idea is that you end up leveraging apex:inputHidden components that you will need to keep updated or update just prior to inoking any action methods using javascript to glue things together.


The good news is that my team is working on a number of new features for the component dev kit that will make this kind of thing much much easier (e.g. we will handle the mapping/tracking/etc from Ext.js to VF and back). The bad news is that I do not have a release date for this new functionality that I can share at this time.


Is there an ETA yet on the more advanced feature set of VF and Ext.js?


How can we include apex component in extjs panel?


I've built something a little bit like this myself just now - I wonder if it's similar - an editable ExtJS grid based on a writable store that wraps transactions to the Salesforce back end asynchronously through the AJAX Toolkit.  If anyone is interested it's here.

Here is a cool link to understand the best practices for using extjs with salesforce
Nitul Deori 4Nitul Deori 4
The link from Appirio isn't working. Can someone provide me some similar example of how to create a EXTJS Datagrid in a VF page