0

我正在使用 ST2 并使用 MVC。我对 ExtJS 和 Sencha 很陌生，所以对于许多事情来说，最佳实践并不公平——尽管进行了研究，但在这个问题上我已经走到了死胡同。

我将在下面使用一个玩具示例来说明我的问题，但本质上我的关系如下（从关联的角度来看，它们都可以正常工作）。

Business X  -- Location A
           |
            -- Location N

问题

然后，我想将数据填充到（例如） anExt.dataview.List中，但要对其进行处理，以使每个位置（即子位置）在表中都有自己的单独条目；不仅仅是一个简单的itemTpl格式化单个条目。但是，目前我找不到任何方法来做到这一点。是否可以根据需要连接List并格式化数据，或者我应该创建一个新商店？理想情况下，我想充分利用这些关联。

作为一个粗略的例子，每个条目看起来像这样，带有一些父数据和一些子数据：

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

示例代码

原始数据

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

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

解决方案

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

我为列表创建了一个单独的存储，并通过使用存储上的load侦听器将我需要的数据加载到其中Companies。这似乎是可用的最优雅的解决方案，尽管这意味着您可能需要在不同的地方添加额外的逻辑以确保它保持令人满意的同步。

通过将位置对象本身推送到新存储中，关联保持不变（即您仍然可以这样做location.getCompany()）。

4

1 回答 1

1

是的，为位置创建另一个商店。

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

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

但这确实只会显示信息，它不会让您将每个位置作为单独的列表项进行交互。

你可以通过破解视图的方法来让它工作doRefresh，但这只是违背了 lib 的意图和其他开发人员的期望。

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

于 2013-09-10T23:29:06.423 回答