Grouping and sorting a Store in ST2 beta1

[tasseography]

I'm wondering if anyone else is having issues with presenting a list both sorted & grouped, with the beta release.
I can populate a group_index (and item_index), but even with this approach:

config: {
  sorters: 'group_index', // or, ideally, ['group_index', 'item_index'],
  grouper: function(record) {
    return record.get('title_string');
  }
  ...etc...
}

I end up with a list of groups sorted in alphanumeric order, by title_string.
Am I missing the way to do this properly in ST2 b1?

I just checked my pr3 code, and it doesn't display this problem. (I defined the sort in the Store config, then applied store.sort('title_string') on the instance, and it displays the list of 'groups' ordered by index.)

[mitchellsimoens]

When a store is grouped, it will automatically add a sorter to the store.

[tasseography]

Yes, thanks, I was wondering if there was a way to preserve a primary sort on a field of my choosing.
Here's an example case.

In pr3 (adjusting the SortedItem fields to not be within the config object), I get:

-:
Index: 0, Group Index: 0
First Group:
Index: 1, Group Index: 1
Second Group:
Index: 2, Group Index: 2
Index: 3, Group Index: 2
Third Group:
Index: 4, Group Index: 3
Index: 5, Group Index: 3
Index: 6, Group Index: 3
Fourth Group:
Index: 7, Group Index: 4
Index: 8, Group Index: 4
Index: 9, Group Index: 4
Index: 10, Group Index: 4
Fifth Group:
Index: 11, Group Index: 5
Index: 12, Group Index: 5
Index: 13, Group Index: 5
Index: 14, Group Index: 5
Index: 15, Group Index: 5
Sixth Group:
Index: 16, Group Index: 6
Index: 17, Group Index: 6
Index: 18, Group Index: 6
Index: 19, Group Index: 6
Index: 20, Group Index: 6
Index: 21, Group Index: 6

In beta1, I get:

-:
Index: 0, Group Index: 0
Fifth Group:
Index: 11, Group Index: 5
Index: 12, Group Index: 5
Index: 13, Group Index: 5
Index: 14, Group Index: 5
Index: 15, Group Index: 5
First Group:
Index: 1, Group Index: 1
Fourth Group:
Index: 7, Group Index: 4
Index: 8, Group Index: 4
Index: 9, Group Index: 4
Index: 10, Group Index: 4
Second Group:
Index: 2, Group Index: 2
Index: 3, Group Index: 2
Sixth Group:
Index: 16, Group Index: 6
Index: 17, Group Index: 6
Index: 18, Group Index: 6
Index: 19, Group Index: 6
Index: 20, Group Index: 6
Index: 21, Group Index: 6
Third Group:
Index: 4, Group Index: 3
Index: 5, Group Index: 3
Index: 6, Group Index: 3

here's the app.js:

Ext.require([
    'Ext.data.Store',
    'Ext.List'
]);


Ext.define('SortedItem', {
    extend: 'Ext.data.Model',
    // config: {
        fields: [
            { name: 'index', type: 'int' },
            { name: 'group_index', type: 'int' },
            { name: 'group_title', type: 'string' }
        ]
    // }
});


Ext.setup({
    onReady : function() {
        var store = Ext.create('Ext.data.Store', {
            model: 'SortedItem',
            sorters: ['group_index', 'index'],
            groupField: 'group_index',
             getGroupString: function(record) {
                return record.get('group_title')+':';
            },
            autoLoad: true,

            data: [
                {index: 0, group_index: 0, group_title: '-'},
                {index: 1, group_index: 1, group_title: 'First Group'},
                {index: 2, group_index: 2, group_title: 'Second Group'},
                {index: 3, group_index: 2, group_title: 'Second Group'},
                {index: 4, group_index: 3, group_title: 'Third Group'},
                {index: 5, group_index: 3, group_title: 'Third Group'},
                {index: 6, group_index: 3, group_title: 'Third Group'},
                {index: 7, group_index: 4, group_title: 'Fourth Group'},
                {index: 8, group_index: 4, group_title: 'Fourth Group'},
                {index: 9, group_index: 4, group_title: 'Fourth Group'},
                {index: 10, group_index: 4, group_title: 'Fourth Group'},
                {index: 11, group_index: 5, group_title: 'Fifth Group'},
                {index: 12, group_index: 5, group_title: 'Fifth Group'},
                {index: 13, group_index: 5, group_title: 'Fifth Group'},
                {index: 14, group_index: 5, group_title: 'Fifth Group'},
                {index: 15, group_index: 5, group_title: 'Fifth Group'},
                {index: 16, group_index: 6, group_title: 'Sixth Group'},
                {index: 17, group_index: 6, group_title: 'Sixth Group'},
                {index: 18, group_index: 6, group_title: 'Sixth Group'},
                {index: 19, group_index: 6, group_title: 'Sixth Group'},
                {index: 20, group_index: 6, group_title: 'Sixth Group'},
                {index: 21, group_index: 6, group_title: 'Sixth Group'},
            ]
        });


        Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: 'fit',
            items: {
                xtype: 'list',
                store: store,
                grouped: true,
                itemTpl: 'Index: {index}, Group Index: {group_index}' // + ', Id: {id}'
            }
        });
    }
});

[TommyMaintz]

This was a known issue in the Touch Beta 1. In the meantime we have fixed it and added new functionality to Grouper to support all these different use cases. I modified your example to do something similar to what you are trying to do except for fun I do a DESC direction on the index within each group. Note that this will work starting in Beta 2.

        Ext.require([
            'Ext.data.Store',
            'Ext.List'
        ]);

        Ext.define('SortedItem', {
            extend: 'Ext.data.Model',
            config: {
                fields: [
                    { name: 'index', type: 'int' },
                    { name: 'group_index', type: 'int' },
                    { name: 'group_title', type: 'string' }
                ]
            }
        });


        Ext.setup({
            onReady : function() {
                var store = Ext.create('Ext.data.Store', {
                    model: 'SortedItem',
                    sorters: {
                        property: 'index',
                        direction: 'DESC'
                    },
                    grouper: {
                        sortProperty: 'group_index',
                        groupFn: function(record) {
                            return record.get('group_title') + ':';
                        }
                    },
                    autoLoad: true,

                    data: [
                        {index: 0, group_index: 0, group_title: '-'},
                        {index: 1, group_index: 1, group_title: 'First Group'},
                        {index: 2, group_index: 2, group_title: 'Second Group'},
                        {index: 3, group_index: 2, group_title: 'Second Group'},
                        {index: 4, group_index: 3, group_title: 'Third Group'},
                        {index: 5, group_index: 3, group_title: 'Third Group'},
                        {index: 6, group_index: 3, group_title: 'Third Group'},
                        {index: 7, group_index: 4, group_title: 'Fourth Group'},
                        {index: 8, group_index: 4, group_title: 'Fourth Group'},
                        {index: 9, group_index: 4, group_title: 'Fourth Group'},
                        {index: 10, group_index: 4, group_title: 'Fourth Group'},
                        {index: 11, group_index: 5, group_title: 'Fifth Group'},
                        {index: 12, group_index: 5, group_title: 'Fifth Group'},
                        {index: 13, group_index: 5, group_title: 'Fifth Group'},
                        {index: 14, group_index: 5, group_title: 'Fifth Group'},
                        {index: 15, group_index: 5, group_title: 'Fifth Group'},
                        {index: 16, group_index: 6, group_title: 'Sixth Group'},
                        {index: 17, group_index: 6, group_title: 'Sixth Group'},
                        {index: 18, group_index: 6, group_title: 'Sixth Group'},
                        {index: 19, group_index: 6, group_title: 'Sixth Group'},
                        {index: 20, group_index: 6, group_title: 'Sixth Group'},
                        {index: 21, group_index: 6, group_title: 'Sixth Group'}
                    ]
                });


                Ext.create('Ext.Panel', {
                    fullscreen: true,
                    layout: 'fit',
                    items: {
                        xtype: 'list',
                        store: store,
                        grouped: true,
                        itemTpl: 'Index: {index}, Group Index: {group_index}' // + ', Id: {id}'
                    }
                });
            }
        });

This produces the following result:

[tasseography]

awesome, thanks!
I'll close this out now, and will just re-open if there are any issues come beta2.

[clubby]

I wasn't actually able to sort by my group index using that method. I managed to make it work with this:

  config: {
    model: 'MyApp.model.Model',
    grouper: {
      direction: 'asc',
      property: 'group_index',
      groupFn: function(record) {
        return record.get('group_name');
      }
    }
  }

[clubby]

Nevermind. My method sorted the list correctly, but it didn't set the header for each group correctly. It used the group_index instead.

I tried this, but it doesn't sort by any order. It does get the group header correct though. Any ideas??

  config: {
    model: 'MyApp.model.MyModel',
    grouper: {
      sortProperty: 'group_index',
      groupFn: function(record) {
        return record.get('group_name');
      }
    }
  }

[TommyMaintz]

clubby, you are going to have to show me a bit more of your code and explain what you are trying to do before I can help you.

[clubby]

I have an array of items for my list, which each have a group_index. I'd like to group these items by group_index, and sort the groups by group_index in ascending order. The order within a group doesn't matter. So all items with group_index of 0 should be in the top-most group, and items with group_index "n" should be the bottom-most group. The group header should be the group_name.

With the code below, the list items are grouped by group_index correctly, but there is no apparent order to the groups. I tried adding "direction: 'asc'" to the grouper config, but that didn't do anything. As I mentioned before, the groups were sorted correctly when I used "property" instead of "sortProperty", except then the group headers were the index instead of the name.

Model:

Ext.define('MyApp.model.MyModel', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
      {name: "id",    type: "int"},
      {name: "text", type: "string"},
      {name: "user_name", type: "string"},
      {name: "group_name", type: "string"},
      {name: "group_index", type: "int"}
    ]
  }
});

Store:

Ext.define('MyApp.store.MyStore', {
  extend: 'Ext.data.Store',
  requires: ['MyApp.model.MyModel'],
  config: {
    model: 'MyApp.model.MyModel',
    grouper: {
      sortProperty: 'group_index',
      groupFn: function(record) {
        return record.get('group_name');
      }
    }
  }
});

List:

Ext.define('MyApp.view.MyList', {
  extend: 'Ext.dataview.List',
  xtype: 'restaurantreviewslist',
  config: {
    title: 'List',
    iconCls: 'user_list_icon',
    baseCls : 'x-list',
    store : 'MyStore',
    scrollable : 'vertical',
    grouped: true,
    itemTpl: new Ext.XTemplate (
      //template
    )
  }
});

Function in Controller that Loads Data:

loadData: function (Id) {
    var MyStore = Ext.getStore('MyStore'),
        MyList = this.getMyList();
    MyStore.setProxy({
      type: 'ajax',
      url : url,
      reader: {type: 'json'}
    });
    MyStore.load();
  },

[TommyMaintz]

Clubby, I'm don't know what your server side returns so I modified your example slightly, but I'm not able to reproduce what you are experiencing. The following code creates a grouped list with groups being ordered ascending.

        Ext.define('MyApp.model.MyModel', {
            extend: 'Ext.data.Model',
            config: {
                fields: [
                    {name: "id",          type: "int"},
                    {name: "text",        type: "string"},
                    {name: "user_name",   type: "string"},
                    {name: "group_name",  type: "string"},
                    {name: "group_index", type: "int"}
                ]
            }
        });

        Ext.define('MyApp.store.MyStore', {
            extend: 'Ext.data.Store',
            config: {
                model: 'MyApp.model.MyModel',
                grouper: {
                    sortProperty: 'group_index',
                    groupFn: function(record) {
                        return record.get('group_name');
                    }
                }
            }
        });

        Ext.define('MyApp.view.MyList', {
            extend: 'Ext.dataview.List',
            xtype: 'restaurantreviewslist',
            config: {
                title: 'List',
                iconCls: 'user_list_icon',
                baseCls : 'x-list',
                store : 'MyStore',
                scrollable : 'vertical',
                grouped: true,
                itemTpl: '{text}'
            }
        });

        Ext.setup({
            onReady: function() {
                var store = Ext.create('MyApp.store.MyStore', {
                    data: [
                        {id: 1, text: 'Item 1', group_name: 'Group 3', group_index: 3},
                        {id: 2, text: 'Item 2', group_name: 'Group 3', group_index: 3},
                        {id: 3, text: 'Item 3', group_name: 'Group 3', group_index: 3},
                        {id: 4, text: 'Item 4', group_name: 'Group 2', group_index: 2},
                        {id: 5, text: 'Item 5', group_name: 'Group 2', group_index: 2},
                        {id: 6, text: 'Item 6', group_name: 'Group 2', group_index: 2},
                        {id: 7, text: 'Item 7', group_name: 'Group 1', group_index: 1},
                        {id: 8, text: 'Item 8', group_name: 'Group 1', group_index: 1},
                        {id: 9, text: 'Item 9', group_name: 'Group 1', group_index: 1}
                    ]
                });

                var list = Ext.create('MyApp.view.MyList', {
                    fullscreen: true,
                    store: store
                });
            }
        });