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 52 posts at DZone. You can read more from them at their website. View Full User Profile

Remote Grouping in a Sencha Touch Store

07.07.2014
| 3059 views |
  • submit to reddit

In this article you are going to learn how to perform remote grouping in a Sencha Touch Store using a .Net backend. These are the topics that the tutorial covers:

  • Using a Sencha Touch Store’s grouper config
  • Using the Store Class’s remoteGroup config
  • Using the Store Class’s setGrouper method
  • Using the Store Class’s setGroupField method
  • Using the Store Class’s setGroupDir method

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 grouping 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, create the following directories and files:

remote grouping in a sencha touch store

Make sure to include the Sencha Touch libraries in the index.html file. My file looks like the screenshot below:

sencha-touch-stores-server-side-grouping-5

Creating the Model

We need to create a Sencha Touch Model for the records that we will place in the Store. 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' },
            { name: 'color', type: 'string' }
        ]
    }
});

We will declare this model in 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 Products.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'
            }
        },
        grouper: {
            property: 'productLine',
            direction:'ASC'
        },
        remoteGroup: true
    }
});

The grouper config defines how the Store’s records will be grouped. Grouping works by applying a first level of sorting to the Store’s records. The property config of the Grouper object is the property that will be used to group the Store’s records. The direction config is the direction used to sort the groups. If the sorters config is present, the sorters are applied after the sort defined by the grouper config. It is up to any visual components that use the Store to render visual representation of the groups.

The remoteGroup config tells the Store whether to defer grouping operations to the server. In this example we are setting it to true.

Note that when we use a buffered Store, the remoteGroup config is set to true by default, as a buffered Store holds on the client side only a subset of the dataset available on the server.

As I explained in my previous Sencha Touch Stores grouping article, other frequently used grouper configs are the groupFn and the sortProperty. We can use the groupFn to customize how the groups are defined. Commonly you would group records based on a property of the model. With groupFn we can provide a function that uses arbitrary criteria to define the groups.

The sortProperty config allows us to sort the groups by a property other than the groups themselves, whether the groups are defined by the property config or by the groupFn config.

Let’s make sure to declare the Store in the stores config of the application in the app.js file:

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-stores-remote-grouping

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.

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.)