Extjs 如何将关联/子数据作为单独的条目插入Ext.data.list

我正在使用ST2和MVC。我对ExtJS和Sencha非常陌生，所以我对很多方面的最佳实践都不太了解——在这个问题上，尽管进行了研究，我还是走到了死胡同

下面我将用一个玩具示例来说明我的问题，但本质上我有如下关系（从关联的角度来看，这些关系都是正确的）

问题 然后，我想将数据填充到（例如）一个

Ext.dataview.List

，但要对其进行处理，使每个位置（即子位置）在表中都有自己的单独条目；不仅仅是一个简单的

itemTpl

格式化单个条目。然而，目前我找不到任何方法来做到这一点。是否可以挂接到

列表中

并根据需要格式化数据，还是应该创建一个新的存储？理想情况下，我想充分利用这些联系

作为一个粗略的示例，每个条目都是这样的，有一些父数据和一些子数据：

    ---------------------------
    |Smith Co - 1 Smith Street|
    ---------------------------
    |Smith Co - 24 High Street|
    ---------------------------
    |Tea[...] - 12 Tea Leaf   |
    ---------------------------
    |Tea[...] - 3 Bis Kit     |
    ---------------------------

示例代码 原始数据 位置模型 公司模式 商场 控制器 看法

---

解决方案编辑（2013年9月15日）：

解决方案 我使用了@rixo建议的解决方案（我一直希望在最初的问题中避免）

我为列表创建了一个单独的存储，并使用

companys

存储上的

load

侦听器将我需要的数据加载到其中。这似乎是可用的最优雅的解决方案，尽管这意味着您可能需要在不同的位置添加额外的逻辑，以确保它保持令人满意的同步

---

通过将location对象本身推入新存储，关联保持不变（即，您仍然可以执行

location.getCompany（）

）。

是，为位置创建另一个存储

您可能已经尝试过这样的模板：

itemTpl: [
    '{name}',
    '<tpl for="locations">',
        ', {address}',
    '</tpl>'
]

itemTpl:[
“{name}”，
'',
“，{address}”，
''
]

但这实际上只会显示信息，它不会让您作为单个列表项与每个位置交互

您可以通过修改视图的方法使其工作，但这违背了lib的意图和其他开发人员的期望

---

可能问题在于，您只能以这种格式获取数据，即将位置作为公司的子公司，而无法让服务器向您发送公司的平面列表。在这种情况下，我认为最有意义的方法将是定制一个阅读器，以便从公司中扁平化位置，并提供一个独立的位置存储。该方法似乎是一个非常有希望的开始（请参阅实现其根属性）。

可能从另一个方向解决此问题，是否有可能访问存储以获取位置？这里的问题似乎是，因为数据是从单个位置加载的，所以我无法找到单独访问位置存储的方法。一般来说，这个问题似乎是一个相当明显的OO/ORM问题，我很惊讶没有一个标准的解决方案。没有位置的中央存储。Ext的存储不是数据库表的客户端等价物，这可能会产生误导。通过配置的关联，Ext将为每个公司创建一个位置存储。这就是为什么你必须创造一个。正如我所建议的，你可以通过破解阅读器来获取信息，或者你也可以通过循环浏览公司记录，然后再浏览它们的每个位置来创建数据，如果你想避免额外的请求。非常感谢你的想法，我将尝试几种不同的方法，看看哪种方法最适合。然后，我会用我发现的任何有用的东西来修正我的问题，并选择最佳答案。不幸的是，我目前没有足够的代表给你打UV。

[
   {
      "id":1,
      "name":"Smith Co",
      "locations":[
         {
            "address":"1 Smith Street"
         },
         {
            "address":"24 High Street"
         }
      ]
   },
   {
      "id":2,
      "name":"Tea So Good",
      "locations":[
         {
            "address":"12 Tea Leaf"
         },
         {
            "address":"3 Bis Kit"
         }
      ]
   }
]

Ext.define('Example.model.Location', {
    extend: 'Ext.data.Model',

    config: {
      fields: [
        { name: 'address', type: 'string' }
      ],
      proxy: { ... }, // Rest proxy that loads data as shown above.

      BelongsTo: 'Example.model.Company'
    }
});

Ext.define('Example.model.Company', {
   extend: 'Ext.data.Model',

   config: {
     fields: [
       { name: 'id', type: 'int' },
       { name: 'name', type: 'string' }
     ],
     proxy: { ... }, // Rest proxy that loads data as shown above.

     hasMany: { model: 'Example.model.Location', name: 'locations' }

   }
});

Ext.define('Example.store.Companies', {
    extend: 'Ext.data.Store',

    require: 'Example.model.Company',

    config: {
        model: 'Example.model.Company'
    } 
});

// (works correctly, relationships are traversable)
// Companies store is looked up and loaded in #launch()

Ext.define('Example.view.CompaniesList', {
    extend: 'Ext.List',
    xtype: 'companieslist', 

    config: {
        layout: 'fit',
        store: 'Businesses',
        itemTpl: [
            // Tpl is only to format inside each element
        ]
    }
});

itemTpl: [
    '{name}',
    '<tpl for="locations">',
        ', {address}',
    '</tpl>'
]