Question about loading data from a store.

[Devon_Britton]

Hi everyone.

I am new to Sencha Touch and I am using Sencha Architect.

I'm having an issue when loading data from a store.

I have the following nested JSON store (RavenDB):

{
"ID": 3,
"Name": "Sarah Carlson",
"Telephone": "(011) 123 4567",
"Address": "1 Test ave",
"Suburb": "Test",
"City": "Testville",
"Province": "Gauteng",
"Country": "South Africa",
"PostalCode": "0001",
"DeliveryStatus": "Pending",
"Packages": [
{
"ID": 1,
"Name": "Package 1",
"Status": "Pending"
},
{
"ID": 2,
"Name": "Package 2",
"Status": "Pending"
}
]
}

I am populating a list with the data from the store but the problem lies in what happens when you select an item.

I need to take the "Packages" for the selected customer and populate another list on the next page with them, however, I am unable to get any of the Package details. All I get when I load the packages are objects but I cannot pull any data from them.

Here's what I get when I do a console.log(packages):

[
Object


ID: 1
Name: "Package 1"
Status: "Pending"
__proto__: Object

,
Object


ID: 2
Name: "Package 2"
Status: "Pending"
__proto__: Object



Why can't I use the getAt() method to retrieve the information?

My code is as follows.

Shipment Model:

Ext.define('Deliveries.model.Shipment', {
extend: 'Ext.data.Model',
uses: [
'Deliveries.model.Package'
],
config: {
fields: [
{
name: 'ID',
type: 'int'
},
{
name: 'Name',
type: 'string'
},
{
name: 'Telephone',
type: 'string'
},
{
name: 'Address',
type: 'string'
},
{
name: 'Suburb',
type: 'string'
},
{
name: 'City',
type: 'string'
},
{
name: 'Province',
type: 'string'
},
{
name: 'Country',
type: 'string'
},
{
name: 'PostalCode',
type: 'string'
},
{
name: 'DeliveryStatus',
type: 'string'
},
{
name: 'Packages'
}
],
hasMany: {
associationKey: 'Packages',
model: 'Deliveries.model.Package'
}
}
});


Package Model:

Ext.define('Deliveries.model.Package', {
extend: 'Ext.data.Model',
uses: [
'Deliveries.model.Shipment'
],
config: {
fields: [
{
allowNull: false,
name: 'ID',
type: 'int'
},
{
name: 'Name'
},
{
name: 'Status'
}
],
belongsTo: {
model: 'Deliveries.model.Shipment'
}
}
});


Controller:

Ext.define('Deliveries.controller.CustomerController', {
extend: 'Ext.app.Controller',
config: {
refs: {
dataList: '#dataList',
mainNav: '#mainNav',
packageList: '#packageList'
},


control: {
"#dataList": {
itemtap: 'onListItemTap'
}
}
},


onListItemTap: function(dataview, index, target, record, e, options) {
var me = this, info, details;
if (record) {
details = Ext.create('Deliveries.view.DetailsContainer', {
title: record.get('Name')
});
info = details.child('#details');
info.setData(record.data);
var packages = record.get('Packages');
var packageList = details.child('#packageList');
packageList.setData(packages);
me.getMainNav().push(details);
}
}


});


Your help is greatly appreciated!!

Regards,
Devon Britton.

[fousheezy]

From what it looks like, 'packages' is returning a simple javascript array which has the two package model instances you want. You can access them by simply doing packages[index] instead of packages.getAt(index)

[Devon_Britton]

Thanks man!! You really helped me out!!!

Any idea how I could get the list on the next page to show the name of each package though?

I'm using the setTpl method to try and set the following template.

<div>
<select id="option{ID}">
<option value="Pending">Pending</option>
<option value="Delivered">Delivered</option>
<option value="Damaged">Damaged</option>
<option value="Refused">Refused</option>
</select> {packageName}
</div>


for (var i = 0; i < packages.length; i++)
{
var packageName = packages[i].Name;
var tpl = '<div> <select id="option{ID}"> <option value="Pending">Pending</option> <option value="Delivered">Delivered</option> <option value="Damaged">Damaged</option> <option value="Refused">Refused</option> </select> {packageName} </div>';
alert(tpl);
packageList.setTpl(tpl);
}


It doesn't seem to be working though.

[fousheezy]

You don't seem to be using the template correctly, you should define a tpl config option in the packageList panel. You can put a <tpl> tag in these templates which signal the template engine to do some meta-work like iterating over all the elements in an array. <tpl for="."> does just that on the root element of the data object you pass to the panel.



config: {
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<select id=option{ID}>',
'<option value="Pending">Pending</option>',
'<option value="Delivered">Delivered</option>',
'<option value="Damaged">Damaged</option>',
'<option value="Refused">Refused</option>',
'</select>',
'{Name}',
'</div>',
'</tpl>',
)
}


This will iterate over all the models in the packages array. You can even add conditional logic to pre-select the package status



'<option value="Damaged"{% if (Status == "Damaged") { %} selected="selected"{% } %}>Damaged</option>'

Note that in the template conditional statement, you need not surround "Status" with curly braces like if you were simply outputting it in the template

So if you set the template like so and set the data for that panel in the controller, you should see what you want.