+ Start a Discussion

Salesforce Visualforce Page And Sencha Touch

We are trying to create a hybrid app using visualforce pages, @remoteaction and sencha touch 2.0. I'm having issues with understanding the proxy method on Sencha Touch in relationship to the @remoteaction and loading data.  Is there a good tutorial?


Our goal is to use Sencha Designer 2 to create UI and copy code to a visualforce page. Then hooking up the remote action. I saw this at Cloudforce in SF in March 2012 but cannot find any documentation. The session was "Partner Session: Build a HTML5 App from scratch with the Sencha Framework"


Can anyone help?


Thank but those where not helpiful. 


Sorry, should have read closer.


What's the specific issue w/ @RemoteAction?

Gaurav KheterpalGaurav Kheterpal

I've used Sencha Architect and written a couple of force.com apps. If you can explain your issue in detail, I may be able to help.




What I'm looking for is a good example on how to use Sencha Touch inside visual force page.  A way to load the data from a remote action inside a data function of the Sencha Touch. Are you using Rest API from Salesforce?



Apex Page:


		    name: 'Sencha',	
		    launch: function() {

			Ext.define('User', {
			    extend: 'Ext.data.Model',
			    config: {
			        fields: [
			            {name: 'id',    type: 'int'},
			            {name: 'name',  type: 'string'},
			            {name: 'phone', type: 'string', mapping: 'phoneNumber'}

			//this data, I want to come from a remote action inside a apex class
			var data = {
			    users: [
			            id: 1,
			            name: 'Ed Spencer',
			            phoneNumber: '555 1234'
			            id: 2,
			            name: 'Abe Elias',
			            phoneNumber: '666 1234'
			Ext.create('Ext.data.Store', {
				    autoLoad: true,
				    model: 'User',
				    data : data,
				    proxy: {
				        type: 'memory',
				        reader: {
				            type: 'json',
				            root: 'users'



Also, in the Sencha Architect, it breaks down things into folders like view, model, etc. What is a best practice for copying the code into a visualforce page? The end goal here is to have a hybrid app that uses Sencha Touch and Charts on visual force page and reusing the base apex classes in our library.


It's a few months since your last post, and I don't know if you solved it yourself or if you're even still trying to integrate.  I just posted the first of a series on Sencha Touch and Force.com integrtion on the Sencha BLOG, and the second posting which is pending in the next few days does show how to use Remoting with the proxy.  Check out Part 1 here - http://www.sencha.com/blog/developing-mobile-applications-with-force-com-and-sencha-touch-part-1/ and feel free to ping me with questions. 

Emilio BEmilio B

Very much appreciated!  I'm deep into an integration between Sencha Touch 2 and Visualforce right now.

I'll be reading these blog posts!


@RemoteAction  causes the sencha libraries to throw all sorts of uncaught type errors for me.

That is, a perfectly working sencha touch app stops working after merely adding that one thing to an Apex controller !


I guess maybe the Visualforce code injection uses Ext.js as well? 


I'm moving on to using some other strategies (RESful calls or Web Services).  Until then, any insight would be appreciated.



Emilio BEmilio B

Responding to my own post for the benefit of others using Sencha.


Near as I can figure, my issue was that I "crawl" the item object tree in Sencha and "attach" events and other interesting attributes to track drag-n-drop events.  When I added @Remote in an Apex class tied to a Visualforce page, some extra JavaScript was automatically inserted for AJAX remoting by the Visualforce page rendering subsystem.


So this extra treatment on the DOM tree caused the same code to hit these newly added AJAX remoting objects which it thought were "draggable" and my code was attempting to attach Sencha "on" events where they cannot be. In other words there were a few places where I was not checking for "undefined" arrays and/or not checking for "xxx typeof ClassName"... my code assumed that certain "observable" mixins existed.


You know what they say about assumptions... sigh...