Dynamically changing the sorters on a store? - sencha-touch

Question

I have a store where I want to predefine a few sets of sorters. For the first, I defined the sort order by band rank, lastName.
{
property: 'rank',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}
For my second, I want the sorter to be by year, band, lastName:
{
property: 'year',
direction: 'ASC'
},
{
property: 'band',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}
How can I swap out the first sorter for the second on my Store, then swap it back as needed?
Here's the rest of the code:
BandMemberStore.js:
Ext.define('Sencha.store.BandMemberStore', {
extend: 'Ext.data.Store',
requires: [],
config: {
model: 'Sencha.model.BandMember',
autoLoad: true,
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'bands.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
sorters : [
{
property: 'rank',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}
]
},
load: function () {
this.callParent(arguments);
}
});
The model:
Ext.define('Sencha.model.BandMember' , {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'rank', type: 'int'},
{name: 'band', type: 'string'},
{name: 'year', type: 'int'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{
name: 'fullName',
type: 'string',
convert: function (value, record) {
firstName = record.data.firstName;
lastName = record.data.lastName;
fullName = firstName + " " + lastName;
return fullName;
}
}
]
},
load: function () {
this.callParent(arguments);
}
});
app.js:
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: "Sencha",
models: ['BandMember'],
stores: ['BandMemberStore'],
views: [],
controllers: [],
launch: function () {
console.log("Launching");
var aList = Ext.create("Ext.List", {
fullscreen: true,
store: 'BandMemberStore',
itemTpl: "{rank} / {year} / {band} / {lastName}, {firstName} - {fullName}"
});
Ext.Viewport.add(aList);
}
});
bands.json:
{"items": [
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Glenn", "lastName": "Fry" },
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Don", "lastName": "Henley" },
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Joe", "lastName": "Walsh" },
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Timothy", "lastName": "Schmit" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "John", "lastName": "Lennon" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "Paul", "lastName": "McCartney" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "George", "lastName": "Harrison" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "Ringo", "lastName": "Starr" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Mick", "lastName": "Jaggar" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Keith", "lastName": "Richards" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Charlie", "lastName": "Watts" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Ron", "lastName": "Wood" },
]}

Answer 1

var sorters1 = [ {
property: 'rank',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}],
sorters2 = [ {
property: 'year',
direction: 'ASC'
},
{
property: 'band',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}],
store = Ext.getStore('YourStoreIdHere');
//use first sorters
store.sort(sorters1);
//use second sorters
store.sort(sorters2);
//or you can just change sorters by
store.setSorters(sorters2);