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,

     }
 });

リストItemsには、「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'
    }

});

よく見ると、追加の構成が1つあることがわかりbelongsToます。PackageModel各パッケージには多くのPOIがあるため、これはあなたとの多対1の関連付けを表しています。

これを行った後、あなた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モデルの複数のモデルインスタンスがあることを表します。はjsonからassociationKeyのキーであり、POIモデルのモデルインスタンスを提供します。POImodel

その後、ストア内のリーダーを-に変更する必要があります。

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

     }
 });

rootPropertyjsonのルートに設定する必要があります。ここにあるのではないかと思い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つのことは正しくありません-

  1. ストアとモデルは。を持つことはできませんxtype。
  2. すべてのconfigオプションは内部config:{}のみにある必要があります。
于 2013-02-10T17:12:39.780 に答える