显示来自嵌套 json 的列表：Sencha Touch 2

Question

我有一个列表，其中显示带有餐厅徽标等的餐厅列表。

观点

Ext.define('Test.view.Contacts', {
    extend: 'Ext.List',
    xtype: 'contacts',

    config: {
        title: 'Stores',
        cls: 'x-contacts',

        store: 'Contacts',
        itemTpl: [
            '<div class="headshot" style="background-image:url(resources/images/logos/{logo});"></div>',
            '{name}',
            '<span>{add1}</span>'
        ].join('')
    }
});

当您点击餐厅时，我希望它根据所点击的项目显示另一个列表。

第二个视图

Ext.define('Test.view.Menu', {
    extend: 'Ext.List',
    xtype: 'contact-menu',

    config: {
        title: 'Menu',
        cls: 'x-contacts',

        store: 'Contacts',
        itemTpl: [
            '<div>{item}</div>'
        ].join(''),
    },
});

模型

Ext.define('Test.model.Contact', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            'name',
            'logo',
            'desc',
            'telephone',
            'city',
            'add1',
            'post',
            'country',
            'latitude',
            'longitude'
        ],
        proxy: {
            type: 'ajax',
            url: 'contacts.json'
        }
    },
    hasMany: {
        model: "Test.model.Menus",
        name: 'menus'
    }
});

Ext.define('Test.model.Menus', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'item'
        ]
    },
    belongsTo: "Test.model.Contact"
});

商店

Ext.define('Test.store.Contacts', {
  extend: 'Ext.data.Store',

  config: {
    model: 'Test.model.Contact',
    autoLoad: true,
    //sorters: 'name',
    grouper: {
      groupFn: function(record) {
        return record.get('name')[0];
      }
    },
    proxy: {
      type: 'ajax',
      url: 'contacts.json',
      reader: {
        type: 'json',
        root: 'stores'
      }
    }
  }
});

JSON

{
    "stores": [{
        "name": "Science Gallery",
        "logo": "sciencegallery.jpg",
        "desc": "Get some food",
        "telephone": "016261234",
        "city": "Dublin",
        "add1": "Pearse Street",
        "post": "2",
        "country": "Ireland",
        "latitude": "53.34422",
        "longitude": "-6.25006",
        "menu": [{
            "item": "SC Sandwich"
        }, {
            "item": "SC Toasted Sandwich"
        }, {
            "item": "SC Panini"
        }, {
            "item": "SC Ciabatta"
        }, {
            "item": "SC Burrito"
        }]
    }, {
        "name": "Spar",
        "logo": "spar.jpg",
        "desc": "Get some food",
        "telephone": "016261234",
        "city": "Dublin",
        "add1": "Mayor Street",
        "post": "2",
        "country": "Ireland",
        "latitude": "53.34422",
        "longitude": "-6.25006",
        "menu": [{
            "item": "Spar Sandwich"
        }, {
            "item": "Spar Toasted Sandwich"
        }, {
            "item": "Spar Panini"
        }, {
            "item": "Spar Ciabatta"
        }, {
            "item": "Spar Burrito"
        }]
    }]
}

我想显示所选餐厅的菜单项列表（项目、项目、项目...），但是当我使用嵌套列表时，我必须使用与上一个列表相同的模板，这不适合我的需要。目前我得到了适量的物品，但没有任何显示。你能帮我解决我哪里出错了吗，谢谢。

Answer 1

在我找到解决方案之前，这里有一些您的代码存在的问题（在解决方案生效之前需要解决这些问题）：

• 在Contacts 存储中的代理配置中，JSON roog 的配置是rootProperty，而不是root。

  proxy: {
      type: 'ajax',
      url: 'contacts.json',
      reader : {
          type : 'json',
          rootProperty : 'stores'
      }
  }
  

  您也可以将此代码放入模型中，因为您已经在其中放置了代理配置。这里都是合并的（应该在你的模型中，并从商店中删除代理）：

  proxy: {
      type: 'ajax',
      url: 'contacts.json',
      reader : {
          type : 'json',
          rootProperty : 'stores'
      }
  }
  

• 模型名称应始终为单数，因为它们代表一个对象。所以使用Menu，而不是Menus。

• 您需要在使用它们的类中要求您使用的任何类。例如，您需要在Sencha.model.Contact 类中添加Sencha.model.Menu 类，因此将其添加到Contact.js 中的requires 属性中：

  Ext.define('Sencha.model.Contact', {
      extend: 'Ext.data.Model',
      requires: ['Sencha.model.Menu'],
  
      ...
  });
  

• 您需要在 hasMany 关联中使用 associationKey，因为它通常会查找 menus（从模型名称生成），但在您的 JSON 中是 menu。

  李>

• hasMany 和 belongsTo 配置应位于模型中的 config 块内。

  Ext.define('Sencha.model.Contact', {
      extend: 'Ext.data.Model',
      requires: ['Sencha.model.Menu'],
  
      config: {
          ...
  
          hasMany: {
              model: "Sencha.model.Menu",
              associationKey: 'menu'
          }
      }
  });
  

至于解决方案 :) - 您可以修改列表中的itemTpl 以显示与正在显示的记录相关联。为此，您可以使用：

<tpl for="associatedModelName">
     {field_of_associated_model}
</tpl> 

所以在你的情况下，你可以这样做：

itemTpl: [
    '{name}',
    '<div>',
        '<h2><b>Menu</b></h2>',
        '<tpl for="menus">',
            '<div> - {item}</div>',
        '</tpl>',
    '</div>'
].join('')

这里是一个项目的下载（使用 SDK 工具生成），其中包括一个演示，主要使用您的代码：http://rwd.me/FS57