煎茶存储和模型建立了使用JSON使用 [英] Sencha store and model set up for use with Json

问题描述

我有一个JSON文件......

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,

     }
 });

该列表中的项目被成功填充了包1和程序包。但对我的生活，我不能成功改​​变code来用POI标题为拳头包........'POI1'和'POI2列表中。我将如何去成功地实施以下？任何帮助将大大AP preciated。

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.

推荐答案

您已经给JSON的嵌套这样的事情有点不同在这里。第一件事情是，你需要在你的读来指定 rootProperty 。所以，你在你的JSON定义一个根元素，该元素将被设置为 rootProperty 。

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.

接下来的部分是，你有 POI 为对象的数组。所以，你需要的POI一个单独的模型。
可以定义POI型号 -

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'
    }

}); 

仔细看后，你会发现有一个额外的配置的belongsTo 。这将重新presents许多与一个关联的 PackageModel ，因为有许多POI每个包。

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.

这样做后，你需要改变你的 PackageModel 也 -

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'
    }    
 });

在这里，的hasMany 重新presents，这种模式是有POI模型的多个模型实例。 associationKey 是关键 POI 从你JSON和模式给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 应JSON设置为你的根。我以为这可能是项目在这里。

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的事情，我在你的code发现是不正确的，但 -

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

1. 存储和型号不能有一个的xtype 。


2. 所有配置选项应该是配置内：{} 而已。

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

这篇关于煎茶存储和模型建立了使用JSON使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！