Grouping a Store's data

1. We will start by examining the XML output of the Twitter API and identifying which
fields we want and how it is structured. A sample of the data can be seen as follows
(some data has been omitted to save space):


Published Date




Username




2. Our first step is to define a Model that will contain our Twitter feed data. We will only
map the useful fields that we included, which contain the user, the tweet itself, and
the published date:
Ext.define('Tweet', {
extend: 'Ext.data.Model',
fields: [{
name: 'user',
mapping: 'author/name',
type: 'string'
}, {
name: 'tweet',
mapping: 'title',
type: 'string'
}, {
name: 'published',
type: 'date'
}]
});

3. We now create an Ext.data.Store that will be made up of Tweet models and have
it load the Tweets with an AJAX proxy, pointing to our static twitterData.xml file:
var twitterStore = Ext.create('Ext.data.Store', {
model: 'Tweet',
proxy: {
type: 'ajax',
url: 'twitterData.xml',
reader: {
type: 'xml',
record: 'entry'
}
}
});
twitterStore.load();

4. Now we can define how we would like to group the store's data. We will group it on the
user field and, after it has loaded, we will log the grouped data to the console:
var twitterStore = Ext.create('Ext.data.Store', {
model: 'Tweet',
proxy: {
type: 'ajax',
url: 'data.xml',
reader: {
type: 'xml',
record: 'entry'
}
},
groupers: [{
property: 'user'
}]
});
twitterStore.load({
callback: function(){
console.log(twitterStore.getGroups());
}
});

5. Finally, we will demonstrate how to group the Store at runtime using the group
method. We will remove our groupers configuration and add a grouping on the
published field:
var twitterStore = Ext.create('Ext.data.Store', {
model: 'Tweet',
proxy: {
type: 'ajax',
url: 'twitterData.xml',
reader: {
type: 'xml',
record: 'entry'
}
}
});
twitterStore.load({
callback: function(){
twitterStore.group('published');
console.log(twitterStore.getGroups());
}
});