CleanCode NZ

Well in part 2 of this series, I demonstrated how to make direct ajax calls to wcf service from Extjs, knowing that is not enough to kick the whole extjs ball off yet, as the most attractive aspect of extjs is its colourful ui controls, these controls do not normally use ajax data directly, but through data store to handle the tedious work of data parsing and binding.

There are many types of data store in extjs depending on what format the data is in, the data stores that I know of are simple stores which you can create based on static data, xml data stores and json data stores which are usually used for remote data.

You can create a simple store from static data like this:

var genres = new Ext.data.SimpleStore(
            {
                fields: ['id', 'genre'],
                data: [['1', 'Comedy'], ['2', 'Drama'], ['3', 'Action']]
            });

The one I like most and used most is Ext.data.JsonStore. here I will show how to construct data store that is served by wcf through HttpProxy and underneath of which is using ajax requests that we know in part 2 of this series.

Example of using ‘POST’ to get data and populating the data store

var myparams = { 'id': 1 };
            // Create store 
  var myStore = new Ext.data.JsonStore({
                // Load data at once
                //  autoLoad: true,
                // Override default http proxy settings
                proxy: new Ext.data.HttpProxy({
                    // Call web service method using GET syntax
                    url: 'Service1.svc/PostToGetList',
                    // Ask for Json response
                    headers: this.header || { 'Content-Type': 'application/json;charset=utf-8' },

                    listeners: {
                        exception: function(dp, type, action, options, response, arg ){
                         // Error handling   
                        }
                    },
                    method: 'POST'
                  
                }),
                // Root variable 
                root: 'd',
                // Record identifier
                id: 'VPValue',
                // Fields declaration
                fields: ['VPValue', 'VPDes']
            });

            myStore.load({
                params: Ext.encode(myparams)
                
            });

A few points of above snippet :
1. You can set parameter object through load(), but encode or not depends on it is ‘POST’ or ‘GET’
2. Must change headers if it is ‘POST’
3. You can set ‘autoLoad’ to true to load data when store is created or control the time when to load through a call of load()
4. Be careful about the root setting, it tells data store to parse the data under ‘d’, not the default, due to special wrapping of json serialization of wcf, and actually this root property can be set to any valid node of json data, only array under that root being parsed and loaded into the data store
5. Fields : must match with json data fields, if they do not match, mappings can be set
6. Id: is the identity field of records set. It might not be necessary if data store is not updated.

Wcf method that fills this store:

[OperationContract]
    [WebInvoke(BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
    public ValuePair[] PostToGetList(int id)
    {
        List<ValuePair> result = new List<ValuePair>();
        for (int i = 0; i <= 9; i++)
        {
            result.Add(new ValuePair { VPValue = i, VPDes = "Item " + i.ToString() });
        }
        return result.ToArray();  
  
    }

And my value pair definition is

public class ValuePair
    {
        public int VPValue { get; set; }
        public string VPDes { get; set; }
    }

Finally as an example of ‘GET’ :

  var myStore2 = new Ext.data.JsonStore({
                // Load data at once
                //  autoLoad: true,
                // Override default http proxy settings
                proxy: new Ext.data.HttpProxy({
                    // Call web service method using GET syntax
                    url: 'Service1.svc/GetList',
                    method: 'GET'

                }),
                // Root variable 
                root: 'd',
                // Record identifier
                id: 'VPValue',
                // Fields declaration
                fields: ['VPValue', 'VPDes']
            });

            myStore2.load({
                params: myparams
            });

Happy coding

Tags: ExtJS, WCF