I've got a Json file......
[
{
"Title":"Package1",
"id":"1",
"POI":[
{
"Title":"POI1",
"LayerID":"1",
},
{
"Title":"POI2",
"LayerID":"1",
}
},
{
"Title":"Package2",
"id":"2",
"POI":[
{
"Title":"POI3",
"LayerID":"2",
},
{
"Title":"POI4",
"LayerID":"2",
}
}
]
populating a store.....
Ext.define('Murmuration.store.MyPackages', {
extend: 'Ext.data.Store',
xtype: 'myPackages',
config: {
model: 'Murmuration.model.PackagesModel',
proxy: {
type: 'ajax',
url : 'data/store.json',
reader: {
type: 'json'
}
},
autoLoad: true
}
});
with a model......
Ext.define('Murmuration.model.PackagesModel', {
extend: 'Ext.data.Model',
xtype: 'packagesModel',
config: {
fields: [
{name: 'Title', type: 'string'},
{name: 'id', type: 'int'}
]
}
});
for said list......
Ext.define('Murmuration.view.homeList', {
extend: 'Ext.List',
xtype: 'homeList',
fulscreen: true,
config: {
title:'Murmuration',
itemTpl: '<div>{Title}</div>',
store:'MyPackages',
fulscreen: true,
}
});
The list Items are successfully being populated with 'Package1' and 'Package2'. But for the life of me I can't successfully change the code to populate the list with the POI titles for the fist package........'POI1' and 'POI2'. How would I go about successfully implementing the following? Any help would be greatly appreciated.
The json you've given is nested so things little different here. First thing is, you need to specify a
rootProperty
in yourreader
. So you define a root element in your json and that element will be set torootProperty
.Next part is, you have
POI
as array of objects. So you'd need a separate model for POI. Model for POI can be defined -After a close look, you'll notice there's one extra config
belongsTo
. This represents many to one association with yourPackageModel
since there are many POI in each package.After doing this, you'd need to change you
PackageModel
also to -here,
hasMany
represents that this model is having multiple model instances of POI model.associationKey
is the keyPOI
from you json andmodel
gives the model instance of POI model.After doing that you'd need to change your reader in store to -
rootProperty
should be set to root of you json. I assumed it could beitems
here.Finally in you view you can have template set up like this -
2 things I found in your code are not correct though -
xtype
.config
options should be insideconfig:{}
only.