PDA

View Full Version : Sort dataview by traversing model associations



putnam.joel
1 Oct 2012, 12:49 PM
I am attempting to sort and filter a store within a DataView. Sorting and filtering is dependent on the user making selections within a separate view.

The model for the DataView is generated from a cakephp framework using the Bancha Plugin. I have been able to confirm that all of the associations are setup exactly as the tables in the database and I can load, view and sort individual models. I am now stuck traversing any of the associations between the models.

The overview is this:
Project Store - loaded from Project Model and inserted into the Dataview. Records contain only the project name and keys to other tables that hold relevant information.

My issue is that I need to sort based on the keyed information. I am guessing I need to generate a store with all of the information contain within?

skirtle
1 Oct 2012, 1:29 PM
Local sorting or remote sorting?

For local sorting it should be pretty easy to sort based on associations. While most sorting is done on a field within the record there no reason why it has to be, you can pass an arbitrary sort function. As you say, you'll need all the associations pre-loaded for the records in your store, otherwise the sort function won't be able to access them.

Remote sorting is a totally different kettle of fish but from what you've said it doesn't sound like that's what you want.

putnam.joel
1 Oct 2012, 1:56 PM
Thanks for your reply. I was beginning to think I might be moving down the wrong path. I would rather not have to do any remote sorting or filtering. Is there any examples out there that outline this? I have been unable to locate anything with respect to associations other than complaints on forums and the example example of returning a single record in the documentation. (user posts comments)

Thanks again.

skirtle
2 Oct 2012, 3:15 AM
Here's a contrived example that covers the key areas. In practice you wouldn't usually bother to use associations for something this simple, you'd just use a mapping to flatten the data into a single model.


Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
fields: ['country'],

getCountry: function() {
return this.get('country');
}
});

Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['name'],

hasOne: {
associationKey: 'address',
getterName: 'getAddress',
model: 'MyApp.model.Address',
name: 'address',
setterName: 'setAddress'
}
});

Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: 'MyApp.model.User'
});

store.loadRawData([
{
name: 'Thomas',
address: {country: 'Belgium'}
}, {
name: 'Adam',
address: {country: 'Denmark'}
}, {
name: 'Lizzie',
address: {country: 'Austria'}
}
]);

Ext.create('Ext.view.View', {
itemTpl: '{name} - {address.country}',
renderTo: Ext.getBody(),
store: store
});

Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Name Sort',
handler: function() {
store.sort('name', 'ASC');
}
});

Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Country Sort',
handler: function() {
store.sort({
sorterFn: function(user1, user2) {
var country1 = user1.getAddress().getCountry(),
country2 = user2.getAddress().getCountry();

return country1 === country2 ? 0 : (country1 < country2 ? -1 : 1);
}
});
}
});
});