1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    tasseography is on a distinguished road

      0  

    Default Answered: Grouping and sorting a Store in ST2 beta1

    Answered: Grouping and sorting a Store in ST2 beta1


    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:

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

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

    Code:
            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:


  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    When a store is grouped, it will automatically add a sorter to the store.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    tasseography is on a distinguished road

      0  

    Default example

    example


    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:
    Code:
    -:
    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:
    Code:
    -:
    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:
    Code:
    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}'
                }
            });
        }
    });

  5. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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.

    Code:
            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:


  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    tasseography is on a distinguished road

      0  

    Default


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

  7. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Answers
    2
    Vote Rating
    2
    clubby is on a distinguished road

      0  

    Default


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

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

  8. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Answers
    2
    Vote Rating
    2
    clubby is on a distinguished road

      0  

    Default


    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??

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

  9. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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.

  10. #9
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Answers
    2
    Vote Rating
    2
    clubby is on a distinguished road

      0  

    Default


    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:
    Code:
    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:
    Code:
    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:
    Code:
    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:


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

  11. #10
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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.

    Code:
            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
                    });
                }
            });