Creating a grouping store for a grid panel in the web UI framework

Creating a grouping store for a grid panel

Sterling Application Platform creates a store for a grid according to the contents of the bindingData config option provided for the grid and its columns. Sterling Application Platform supports the creation of a grouping store for applications running on Ext JS 3.0 only. You can create a grouping store for a grid panel with and without pagination.

This can be done by specifying the storeConfig property in the grid's bindingData and then specifying a groupField (bindingData.storeConfig.groupField).

As the name suggests, storeConfig is used to pass the config options that the user wants to have in the new store. The following additional config options are available to support a grouping store:

• groupField

  The column name by which to group/arrange the store's data. It should correspond to the dataIndex property of the column according to which the grouping should be done.

• groupOnSort

  If this attribute is set to true, the data would be grouped as well as sorted at the same time (the grouping would take place according to the field by which sorting occurs).

  When set to false (the default value), the sort is based on the existing sort information (that is, the details provided in the sortInfo property: bindingData.storeConfig.sortInfo), if provided. In this case, whenever sorting is carried out, the records would be sorted within the group and the original grouping would be retained.

• remoteGroup

  The location of the sort (on the server side or locally). If this attribute is set to true, the grouping should apply on the server side. When set to false (the default value), the grouping is local only. If the grouping is local, it can be applied immediately to the data.

Once you provide a value for bindingData.storeConfig.groupField, Sterling Application Platform creates a new sc.plat.data.GroupingStore (extends Ext.data.GroupingStore) as the grid's store. The new store is configured with a new sc.plat.data.JsonReader as its default reader (this reader extends Ext.data.JsonReader).

The following shows the code for an example screen. The code has been taken from the _config.js and .js files for the screen.

/*Provide grid's view as a GroupingView and storeConfig in bindingData:*/ 
view: new Ext.grid.GroupingView({
    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
. 
. 
. 
bindingData: { 
    sourceBinding: ["getRouteList:RouteList.Route"], 
    targetBinding: ["getSingleRouteList:RouteList.Route"], 
    storeConfig: { 
        groupField: 'SourceAirport' 
    } 
}

Creating a grouping store with pagination

When the number of records to be displayed in the grid are too many, then it would be better to display a certain number of records (or a page of records) at a time on the grid. In such cases, a paginated grid (a normal grid configured with a paginated toolbar) may be used. A paginated grid should be configured with a store capable of handling the paginated data.

Sterling Application Platform handles the creation of such a store. This is done when the when the user provides the contents for the pagination property in bindingData (bindingData.pagination).

Sterling Application Platform also handles the creation of a grouping store with pagination (refer to the previous section for more details on creating a grid with grouping store). This happens when the user configures bindingData.pagination and bindingData.storeConfig.groupField. In this case, a new sc.plat.data.PagingGroupingStore (extends sc.plat.data.GroupingStore) is added as the grid's store. This store is configured with a sc.plat.data.PagingJsonReader (extends sc.plat.data.JsonReader) as the default reader.

The following shows the code for this example screen. The code has been taken from the _config.js and .js files for the screen.

view: new Ext.grid.GroupingView({
    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}), 
bbar : new sc.stk.ui.PagingToolbar({
    paginationStrategy : 'GENERIC'
}), 
. 
. 
. 
bindingData : {
    pagination : {
        strategy : 'GENERIC', 
        url : '/' + sc.plat.info.Application.getApplicationContext() + '/stk/getFlightList.do', 
        pageSize : 10, 
        root : 'FlightList.Flight'
    }, 
    completeRecord : true,
    sourceBinding : ["getFlightList:FlightList.Flight"], 
    targetBinding : ["getFlightList:FlightList.Flight"], 
    storeConfig: { groupField: 'OrganizationCode' 
    } 
}