I'm trying to use the ExtJS 4 Grid widget to display multipe SObjects on a page in an editable grid.

I have a visualforce page which just calls a custom component.

<apex:page sidebar="false" showHeader="false">

	<c:sobjectGrid objectName="Opportunity" />
	
	<c:sobjectGrid objectName="Contact" />
	
	<div id="pmgrid">
		<c:sobjectGrid objectName="Milestone__c" width="600" height="600" title="Milestones" />
	</div>
	
</apex:page>

This visualforce component initializes the ExtJS Grid

<apex:component >
	<apex:attribute name="objectName" 	description=" " type="String" 	required="true"/>
	<apex:attribute name="fields" 		description=" " type="String" 	required="false" default="Id, Name" />
	<apex:attribute name="limit" 		description=" " type="String" 	required="false" default="100" />
	<apex:attribute name="orderby" 		description=" " type="String" 	required="false"/>
	<apex:attribute name="search" 		description=" " type="String" 	required="false"/>
	<apex:attribute name="width" 		description=" " type="Integer" 	required="false" default="400" />
	<apex:attribute name="height" 		description=" " type="Integer" 	required="false" default="300" />
	<apex:attribute name="title" 		description=" " type="String" 	required="false" default="" />

	<!-- Visualforce takes care that this is only loaded once when having more than one component in a page  -->
	<apex:includeScript value="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js" />
	<apex:stylesheet value="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css" />

	<script type="text/javascript">

		Ext.require(['Ext.data.*', 'Ext.grid.*']);

		Ext.define('CurrentSObject', {
			extend: 'Ext.data.Model',
			fields: ['id', 'name']
		});

		Ext.onReady(function(){
			var store = Ext.create('Ext.data.Store', {
				autoLoad: true,
				autoSync: true,
				model: 'CurrentSObject',
				proxy: {
					type: 'rest',
					url: '../services/apexrest/sobject/{!objectName}',
					params: {
		  				sessionId: '{!$Api.Session_ID}'
			  		},
					reader: {
						type: 'json'
					},
					writer: {
						type: 'json'
					}
				},
				listeners: {
					write: function(store, operation){
						var record = operation.getRecords()[0],
							name = Ext.String.capitalize(operation.action),
							verb;
							
						if (name == 'Destroy') {
							record = operation.records[0];
							verb = 'Destroyed';
						} else {
							verb = name + 'd';
						}
						Ext.example.msg(name, Ext.String.format("{0} {!objectName}: {1}", verb, record.getId()));
					}
				}
			});
			
			var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
			
			var grid = Ext.create('Ext.grid.Panel', {
				renderTo: parent.Ext.getBody(),
				plugins: [rowEditing],
				width: {!width},
				height: {!height},
				title: '{!title}',
				store: store,
				columns: [{
					text: 'ID',
					width: 40,
					sortable: true,
					dataIndex: 'id'
				}, {
					text: 'Name',
					flex: 1,
					sortable: true,
					dataIndex: 'name',
					field: {
						xtype: 'textfield'
					}
				}],
				dockedItems: [{
					xtype: 'toolbar',
					items: [{
						text: 'Add',
						iconCls: 'icon-add',
						handler: function(){
							// empty record
							store.insert(0, new CurrentSObject());
							rowEditing.startEdit(0, 0);
						}
					}, '-', {
						itemId: 'delete',
						text: 'Delete',
						iconCls: 'icon-delete',
						disabled: true,
						handler: function(){
							var selection = grid.getView().getSelectionModel().getSelection()[0];
							if (selection) {
								store.remove(selection);
							}
						}
					}]
				}]
			});
			grid.getSelectionModel().on('selectionchange', function(selModel, selections){
				grid.down('#delete').setDisabled(selections.length === 0);
			});
		});
	</script>
</apex:component>

 and loads via this generic SObject CRUD Service that is implemented as Apex REST:

@RestResource(urlMapping='/sobject/*') 
global with sharing class SObjectRestService { 
	
	@HttpPost
	global static String doCreate(RestRequest request, RestResponse response) {
		String resourceType = getType(request);
		String resourceId = getId(request);

		if (resourceId == null) {
			return createResource(resourceType, request);
		} 
		else {	
			response.statusCode = 400;	// BAD REQUEST
			return 'Invalid operation';
		} 
	}

	@HttpGet
	global static List<SObject> doRead(RestRequest request, RestResponse response) {
		String resourceType = getType(request);
		String resourceId = getId(request);

		if (resourceId != null) {
			return getSpecificResource(resourceType, resourceId, request);
		} 
		else {	
			return getAllResources(resourceType, request);
		} 
	}		
	
	@HttpPut
	global static String doUpdate(RestRequest request, RestResponse response) {
		String resourceType = getType(request);
		String resourceId = getId(request);
		Map<String, String> params = request.params;

		if (resourceId != null) {
			return updateResource(resourceType, resourceId, request);
		} 
		else {	
			return 'Invalid operation';
		} 
	}
	
	@HttpDelete
	global static String doDelete(RestRequest request, RestResponse response) {
		String resourceType = getType(request);
		String resourceId = getId(request);

		if (resourceId != null) {
			return deleteResource(resourceType, resourceId);
		} 
		else {	
			return 'Invalid operation';
		} 
	}
  
  	private static String getType(RestRequest request) {
  		String resourceType = null;
  		
  		Integer firstSlash = request.requestURI.indexOf('/sobject/') + 8;
  		Integer lastSlash = request.requestURI.lastIndexOf('/');
  		
  		if(firstSlash == lastSlash) {
  			resourceType = request.requestURI.substring(firstSlash + 1);
  		}
  		else {
  			resourceType = request.requestURI.substring(firstSlash + 1, lastSlash);
  		}
  		return resourceType;
  	}
  
	private static String getId(RestRequest request) {
  		String resourceId = null;
  		  	
  		Integer firstSlash = request.requestURI.indexOf('/sobject/') + 8;
  		Integer lastSlash = request.requestURI.lastIndexOf('/');
  		
  		if(firstSlash != lastSlash) {
  			resourceId = request.requestURI.substring(lastSlash + 1);
  		}
  		return resourceId;  	
  	}
	
  	private static List<SObject> getSpecificResource(String resourceType, String resourceId, RestRequest request) {
    	String qryFields = 'id, name';

    	if (request.params.containsKey('fields')) {
    		qryFields = request.params.get('fields');
    	}
   		return Database.query('select ' + qryFields + ' from ' + resourceType + ' where Id = \'' + resourceId +'\'');
  	}
  
  	private static List<SObject> getAllResources(String resourceType, RestRequest request) { 
	    String qryFields = 'id, name';
	    String qryLimit = 'limit 100';   
	    String qryOrderby = '';      
	    String qryWhere = '';  
	      
	    if (request.params.containsKey('fields')) qryFields = request.params.get('fields');
	    if (request.params.containsKey('limit')) qryLimit = 'limit ' + request.params.get('limit'); 
	    if (request.params.containsKey('orderby')) qryOrderby = 'order by ' + request.params.get('orderby');
	    if (request.params.containsKey('search')) qryWhere = 'where Name LIKE \'' + request.params.get('search') +'%\'';
	      
	    return Database.query('select ' + qryFields + ' from ' + resourceType + ' ' + qryWhere + ' ' + qryOrderby + ' ' + qryLimit);
	}

  	private static String updateResource(String resourceType, String resourceId, RestRequest request) {  	
  		SObject resource;
	    Map<String, Schema.SObjectField> sObjectFieldsMap = Schema.getGlobalDescribe().get(resourceType).getDescribe().fields.getMap();
	  	
	  	try {
			// fetch the member by username if it exists
			resource = Database.query('select Id from ' + resourceType + ' where Id = \'' + resourceId +'\'');
		  	
			// populate the object's fields
			for (String key : request.params.keySet()) {
		    	if (sObjectFieldsMap.containsKey(key) && sObjectFieldsMap.get(key).getDescribe().isUpdateable()) {
					resource.put(key, request.params.get(key)); 
				}
			}	  
			update resource;
		}
		catch (QueryException qe) {
			return resourceType + ' with Id ' + resourceId + ' not found.';		  
		} 
		catch (DMLException de) {
		   	return de.getDmlMessage(0);   
		} 
		catch (Exception e) {
	    	return e.getMessage();
  		}   
	  	return resource.id;
  	}
  	
  	private static String createResource(String resourceType, RestRequest request) {  	
  		SObject resource;
  		Map<String, Schema.SObjectType> gd = Schema.getGlobalDescribe(); 
	    Map<String, Schema.SObjectField> sObjectFieldsMap = gd.get(resourceType).getDescribe().fields.getMap();
	    
	  	try {
			Schema.SObjectType st = gd.get(resourceType);
		        
	        resource = st.newSObject();
	        
			// populate the object's fields
			for (String key : request.params.keySet()) {
		    	if (sObjectFieldsMap.containsKey(key) && sObjectFieldsMap.get(key).getDescribe().isUpdateable()) {
					resource.put(key, request.params.get(key)); 
				}
			}	  
			insert resource;
		}
		catch (DMLException de) {
		   	return de.getDmlMessage(0);   
		} 
		catch (Exception e) {
	    	return e.getMessage();
  		}   
	  	return resource.id;
  	}
  	
  	private static String deleteResource(String resourceType, String resourceId) {  	
	  	try {
			SObject resource = Database.query('select Id from ' + resourceType + ' where Id = \'' + resourceId +'\'');
			delete resource;
			return 'DELETED';
		}
		catch (QueryException qe) {
			return resourceType + ' with Id ' + resourceId + ' not found.';		  
		} 
		catch (DMLException de) {
		   	return de.getDmlMessage(0);   
		} 
		catch (Exception e) {
	    	return e.getMessage();
  		}   
  	}
}

Everything was tested succesfully in separation. The service returns correct JSON. I tested it with the ApiGee Console. The Component renders perfectly with static JSON.

But when I load my page it just renders three empty grids and Firebug is showing me 3 empty XDR response with return code 302 Found.

I have absolutely no clue why. Maybe you can help me?

Ideas what I might have done wrong include:

- Do I need to pass the session id in the components javascript? Have I done it wrong?

- Is ExtJS expecting another JSON format? (This would produce different errors!)

Your ideas are very welcome.

Robert