Mobile Zone is brought to you in partnership with:

Jorge is the author of three software development books: "Building a Sencha Touch Application", "How to Build a jQuery Mobile Application", and the "Ext JS 3.0 Cookbook". He runs a software development and developer education shop that focuses on mobile, web and desktop technologies. Jorge is a DZone MVB and is not an employee of DZone and has posted 49 posts at DZone. You can read more from them at their website. View Full User Profile

Sencha Touch Store Server-Side Sorting

05.01.2014
| 4567 views |
  • submit to reddit

In this article you are going to learn how to perform server-side sorting of the records in a Sencha Touch Store using a .Net backend. These are the topics that the tutorial covers:

  • Using a Sencha Touch Store’s sorters config
  • Using the Store’s remoteSort config
  • How a Sencha Touch Store tells the server endpoint to sort its data
  • How a .Net endpoint sorts data and sends it to a Sencha Touch Store

Creating the Sample App

The app we will use as a testbed is almost an exact copy of the one we used in the Sencha Touch Stores client-side sort tutorial I published recently.

You can use any version of Visual Studio to create your project. Once you create a Visual Studio Project for the app, make sure the app has the following directories:

Sencha Touch Store sort on server example

Now we need to include the Sencha Touch libraries in the index.html. My file looks like the screenshot below. Make sure that your file is pointing to the directory where you placed your copies of the Sencha Touch libraries.

Creating the Model

Next we need to create a Sencha Touch Model for the records that we will place in the Store. We will create a Product model to represent some fictitious products. In the Model directory, create the Product.js file and type the following model definition:

Ext.define('App.model.Product', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'productCode',
        fields: [
            { name: 'productCode', type: 'string' },
            { name: 'productName', type: 'string' },
            { name: 'productLine', type: 'string' }
        ]
    }
});

Let’s add model to the models config of the app in the app.js file.

Ext.application({
    name: 'App',
    models: ['Product'],
    launch: function () {
 
    }
});

Creating the Store

We will also create the ProductsRemote.js file in the Store directory. This is the definition of the store:

Ext.define('App.store.ProductsRemote', {
    extend: 'Ext.data.Store',
    config: {
        model: 'App.model.Product',
        autoSync: false,
        proxy: {
            type: 'ajax',
            api: {
                read: '../../services/collectibles.ashx'
            },
            reader: {
                rootProperty:'products'
            }
        },
        sorters: [{
            property: 'productCode',
            direction: 'ASC'
        }],
        remoteSort:true
    }
});

Pay attention to the remoteSort config. This config defines if the sort will be performed on the client or deferred to the server. This config’s value is false by default. We are setting it to true so the Store will delegate the sorting to the server.

The Store will talk to the server through its proxy. We declared a proxy that points to the services/collectibles.ashx .Net handler, which we will create next.

Let’s not forget to declare the Store in the stores config of the app:

Ext.application({
    name: 'App',
    models: ['Product'],
    stores: ['ProductsRemote'],
    launch: function () {
 
    }
});

A Server-Side Handler to Send Data to a Sencha Touch Store

We will write this handler in C#. Let’s create a services directory in the app, and then add a generic handler called Collectibles.ashx to the directory. The handler should look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace STSort.services
{
    /// <summary>
    /// Summary description for Collectibles
    /// </summary>
    public class Collectibles : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Note the reference to the Newtonsoft.Json namespace. This is provided be the Json.NET library, which we need to add as a reference to the Visual Studio project:

Sencha Touch Store server side sort project

We will leave the handler empty for the time being so we can create a few model classes that will help us send sorted data to the Sencha Touch app.

The Server-Side Product Model

The first server-side model that we need the equivalent of the Product model in the Sencha Touch app. Let’s add a Product.cs file in the services directory, and type the following code in the file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace STSort.services
{
    public class Product
    {
        [JsonProperty(PropertyName = "productCode")]
        public string ProductCode { get; set; }

         [JsonProperty(PropertyName = "productName")]
        public string ProductName { get; set; }

         [JsonProperty(PropertyName = "productLine")]
        public string ProductLine { get; set; }
    }
}

Similar to the client-side Product model we defined in the model/Product.js file, the server-side Product Class has the ProductCode, ProductName and ProductLine properties.

We decorated each property with the JsonProperty attribute provided by the Json.Net library. This attribute allows us to change the names of the Class’s properties when they are serialized to Json. In this case we want each serialized property’s name to match the name of its equivalent property in the Product model of the Sencha Touch app. For example, ProductName becomes productName when serialized to Json.

The ProductsResult Model

When you send data to a Sencha Touch store through its data reader, you need to use an object with at least two properties – a “success” property that tells the Store whether the request to the server was successful, and a property that contains an array of records with the data for the Store. The next model we will create will help us do just that. It will contain a list with the records to be sent to the ProductsRemote Store, and a boolean Success property so we can tell the Store that its request was processed without issues.

In the services directory, create the ProductsResult.cs file and type the following class definition:

public class ProductsResult
{
    [JsonProperty(PropertyName = "success")]
    public bool Success { get; set; }

    [JsonProperty(PropertyName = "products")]
    public List<product> Products { get; set; }
}

When serialized to Json, an instance of the ProductResult class will become a string with a format similar to the sample below, which is a format that the Store’s data reader can understand:

{"success":true,"products":[{"productCode":"S18_1097","productName":"1940 Ford Pickup Truck","productLine":"Trucks and Buses"},{"productCode":"S10_1949","productName":"1952 Alpine Renault 1300","productLine":"Classic Cars"},{"productCode":"S12_4473","productName":"1957 Chevy Pickup","productLine":"Trucks and Buses"}]}

The Sorter Model

The third model that we need will help us extract the sort parameters sent by the ProductsRemote Store from the http request. It is critical that you understand how to do this, because this is how the Sencha Touch Store tells the server endpoint what type of sorting it needs.

Published at DZone with permission of Jorge Ramon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)