Question

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.

Answer 1

The json you’ve given is nested so things little different here. First thing is, you need to specify a rootProperty in your reader. So you define a root element in your json and that element will be set to rootProperty.

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 –

Ext.define('Murmuration.model.POIModel',{
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'Title', type: 'string'},
            {name: 'LayerID', type: 'int'}
        ],
        belongsTo:'Murmuration.model.PackagesModel'
    }

}); 

After a close look, you’ll notice there’s one extra config belongsTo. This represents many to one association with your PackageModel since there are many POI in each package.

After doing this, you’d need to change you PackageModel also to –

Ext.define('Murmuration.model.PackagesModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
          {name: 'Title', type: 'string'},
          {name: 'id', type: 'int'}
        ]
    },
    hasMany:{
        associationKey:'POI',
        model:'Murmuration.model.POIModel',
        name:'POI'
    }    
 });

here, hasMany represents that this model is having multiple model instances of POI model. associationKey is the key POI from you json and model gives the model instance of POI model.

After doing that you’d need to change your reader in store to –

Ext.define('Murmuration.store.MyPackages', {
extend: 'Ext.data.Store',       
config: {
    model: 'Murmuration.model.PackagesModel',
    proxy: {
        type: 'ajax',
        url : 'data/store.json',

    reader: {
        type: 'json',
        rootProperty:'items'
    }
    },
    autoLoad: true

     }
 });

rootProperty should be set to root of you json. I assumed it could be items here.

Finally in you view you can have template set up like this –

itemTpl: new Ext.XTemplate(['<div>Package Title => {Title}'+
            '<tpl for="POI"><h6>POI title => {Title}</h6><h6>POI layer => {LayerID}</h6></tpl></div>'
        ]),

2 things I found in your code are not correct though –

1. Store and Model can not have a xtype.
2. All the config options should be inside config:{} only.