PDA

View Full Version : Example of an external store call for Ext.List



lbuijsma
4 Oct 2010, 8:25 AM
I thought it would be quite easy to attach an "external" store as opposed to an inline store with Sencha Touch. After trying each and every possibility for the past 12 hours I am a) utterly frustrated and b) really wondering whether it is possible at all.

This is what we have (our best effort and first try). In the original script the inline store was where now the red bold "myGridStore" is.


...
callStore = new Ext.data.Store({
model: 'Vacatures',
proxy: {
type: 'ajax',
url: 'js/test.json',
reader: {
type: 'json',
idProperty: 'id',
root: 'rows'
}
},
storeID: 'myGridStore',
autoLoad: true
});

icams.vacaturesPanel = new Ext.List({
tpl: '<tpl for="."><div class="vacaturelijst"><p class="titel">{titel}</p><p class="locatie"><strong>{locatie}</strong></p></div></tpl>',
itemSelector: 'div.vacaturelijst',
singleSelect: true,
grouped: true,
indexBar: true,
store: 'myGridStore'
});

console.dir(callStore);
...

All I get in the console.dir(callStore) is an empty array. Am I overlooking something very obvious?

lbuijsma
4 Oct 2010, 2:46 PM
Solved it myself in the end. As the Ext.List contains a "grouped: true" clause, you need to define what needs to be grouped in the store. And instead of calling the store with the storeId call the store with the variable name! So, this is the end result that did work:


var datestore = new Ext.data.Store({
model: 'Vacatures',
sorters: 'datum',
getGroupString : function(record) {
return record.get('datum');
},
proxy: {
type: 'ajax',
url: 'js/test.json',
reader: {
type: 'json',
idProperty: 'id',
root: 'rows'
}
},
storeID: 'gridstore',
autoLoad: true
});

icams.vacaturesPanel = new Ext.List({
tpl: '<tpl for="."><div class="vacaturelijst"><p class="titel">{titel}</p><p class="locatie"><strong>{locatie}</strong></p></div></tpl>',
itemSelector: 'div.vacaturelijst',
singleSelect: true,
grouped: true,
indexBar: true,
store: datestore,
scroll:"vertical",
title:"Vacatures"
});

This will be a good night rest instead of a restless night!

evant
4 Oct 2010, 3:42 PM
I'll update the docs so that they indicate you must implement the getGroupString method.