Question

我有一个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'。我将如何成功实施以下内容？任何帮助将不胜感激。

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

});

仔细观察后，您会注意到有一个额外的配置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是来自你json的密钥POI，而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的root。我以为它可能是items。

最后在你看来你可以设置这样的模板 -

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

我在你的代码中找到的2件事情虽然不正确 -

商店和型号不能有xtype。
所有config选项只能在config:{}内。

Sencha商店和模型设置与Json一起使用

1 个答案: