0

我有一个Json文件......

 [
    {   
        "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", 
            }
}
 ]

填充商店......

 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

     }
 });

用一个模型......

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

 });

对于上述列表......

 Ext.define('Murmuration.view.homeList', {
extend: 'Ext.List',
xtype: 'homeList',
fulscreen: true,
config: {
    title:'Murmuration',
    itemTpl: '<div>{Title}</div>',
    store:'MyPackages',
fulscreen: true,

     }
 });

列表项已成功填充“Package1”和“Package2”。但是对于我的生活，我无法成功更改代码以使用第一个包的 POI 标题填充列表............'POI1'和'POI2'。我将如何成功实施以下内容？任何帮助将不胜感激。

4

1 回答 1

1

您提供的 json 是嵌套的，所以这里的情况略有不同。首先，您需要rootProperty在reader. 因此，您在 json 中定义了一个根元素，该元素将设置为rootProperty.

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

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

});

仔细看后，你会发现有一个额外的 config belongsTo。这代表与您的多对一关联，PackageModel因为每个包中有许多 POI。

完成此操作后，您还需要将您更改PackageModel为 -

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表示该模型有多个 POI 模型的模型实例。associationKey是POI来自您的 json 的键，并model给出 POI 模型的模型实例。

之后，您需要将商店中的阅读器更改为 -

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的根。我以为它可能在items这里。

最后在您的视图中，您可以像这样设置模板 -

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

我在你的代码中发现的两件事是不正确的 -

  1. Store 和 Model 不能有xtype.
  2. 所有config选项都应该config:{}只在里面。
于 2013-02-10T17:12:39.780 回答