Sencha Touch and WCF sourced JSON handling

I've been experimenting recently with Sencha Touch; ostensibly looking at it in the cross platform mobile development space (when used in conjunction with PhoneGap). It's really rather nice - a sprawling OO edifice that will take some time to 'climb'. It embraces a classical OO way of doing things - in an amusingly (or appealingly for a classicist like myself) orthogonal manner to Javascripts prototype based system.

Anyway, I wrote some RESTful WCF services that serve up various JSON responses, and in this particular case, the standard markup of WCF gave me a minor headache for a short while, before the rather obvious solution became apparent. The part of the app discussed here relates to retrieving a list of accounts, for later display in a DataView (List).

Below is a sample of the JSON as received - a wrapper (Accounts), some information about the success of the call (kept simple for reasons of information disclosure and security), and finally a collection of account 'objects', in the Accounts array.

 {"Accounts":  
  {"Success":true,"Authenticated":true,  
  "Accounts":[  
   {"DisplayableNumber":"99-9110-0780838-00",  
   "Name":"CL33330",  
   "Number":"999110078083800",  
   "AvailableFunds":6002255,  
   "Balance":2255,  
   "CustomisedName":null,  
   "Type":"Revolving Home Loan"},  
   {"DisplayableNumber":"99-9110-1351434-01",  
   "Name":"J S M CL33328, T CL33329",  
   "Number":"999110135143401",  
   "AvailableFunds":165414,  
   "Balance":-34586,  
   "CustomisedName":null,  
   "Type":"Now"},  

Being only trivially skilled with Sencha Touch, I elected to follow a 'text book' approach, defining a model and associated store. The model is where the interesting part lies:

• Lines 2-9: Define a simple namespaced account object, using the properties defined in the JSON response
• Lines 10-16: Define an AJAX proxy for the model. The URL looks strange because this being tested with Eclipse/ADT/Android 2.2, but the RESTful nature of it should be apparent. We configure an inbuilt JSON reader, with the root of Accounts.Accounts. This is the part that befuddled me for a few minutes - there was no example of a compound root to be found; plenty of other examples, but not that. Anyway, this is the key to successful parsing of the response we have.

1:  consumerapp.models.Account =   
2:  Ext.regModel("consumerapp.models.Account", {  
3:    fields: [  
4:      {name: "Name", type: "string"},  
5:      {name: "CustomisedName", type: "string"},  
6:      {name: "Number", type: "string"},  
7:      {name: "DisplayableNumber", type: "string"},  
8:      {name: "Balance", type: "int"}  
9:    ],  
10:    proxy: {  
11:      type: 'ajax',  
12:      url : 'https://10.0.2.2:8000/SecuredServices.svc/Accounts',  
13:      reader: {  
14:        type: 'json',  
15:        root: 'Accounts.Accounts',  
16:      }  
17:    }  
18:  });  

And finally, we associate the model with a custom store, which still has some debug code in it :-)

 consumerapp.stores.accounts = new Ext.data.Store({  
   model: "consumerapp.models.Account",  
   sorters: 'Name',  
   getGroupString : function(record) {  
     return record.get('Name')[0];  
   },  
   listeners: {  
   beforeload: function (store, operation) {    
     console.log('Before loading the store');  
   }  
   },   
 });