Store with custom sorting in Sencha Touch

Question

I have a store + model which is connected to a 3rd party plugin (Ext.ux.TouchGridPanel). The plugin calls the store's sort() method properly with the relevant mapping. Everything is working fine, and the store sorts itself. However, I would prefer to add customer sorting to the store. I have tried adding a sortType field into my model:

Ext.regModel("Transactions", {
    fields: [
        {
            name: 'unit',
            type: 'string',
            sortType: function(value) {
                console.log('PRINT GDAMNIT');
                return 0;
            }
        },

        ...

    ]
});

This, however, is not working, and the sortType is not getting called.

TLDR: How to make custom sorting work for stores?

Solution 1

Your store will need a sorter added that will sort on that field before it will call the sortType function.

var store = new Ext.data.Store({ 
   model: 'Transactions',
   sorters: [
      {
        property: 'unit',
        direction: 'DESC'
      }
   ]}
);

Sort type converts the value of a field into another value to ensure proper ordering. If you aren't sorting on that field than there is no reason to call that function. You could add the sortDir to the field which would sort the field into ascending/descending order based on the type of the field alone.

Solution 2

A workaround might be to (I know this sounds inefficient but bear with me) add an extra field to your model instances (lets call it sortField) and use that for your sorting function. You can then loop through your model instances in your store applying your custom sorting algorithm and assign a sort value of 0,1,2,3,4,5 etc.. to sortField. Then in your store, you can add 'sorters: 'sortField'... Hope this helps a bit, I'm going through something similar at the current moment.

Solution 3

The custom SortType in Sencha Touch 2 works accordingly, as per http://docs.sencha.com/touch/2-0/#!/api/Ext.data.SortTypes:

Ext.apply(Ext.data.SortTypes, {
    asPerson: function(person){
        // expects an object with a first and last name property
        return person.lastName.toUpperCase() + person.firstName.toLowerCase();
    }
});

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'person',
            sortType: 'asPerson'
        }, {
            name: 'salary',
            type: 'float' // sortType set to asFloat
        }]
    }
});

Solution 4

What you're attempting to do might be tricky. Calling store.sort() removes all existing sorters by default (according to Sencha Touch API documentation). To keep the existing sorters you would need to add the sorter to the MixedCollection store.sorters.

Secondly, to call the sort method with a custom sort function, you would need to pass a specific sorterFn instead of property to the Sorter (again, see the API for more details) - but this might prove tricky since the sort call is initiated from the plugin.

Not sure if this helps to solve your problem, but maybe it assists you to look at the right direction.

View more solutions