在 Ext JS 网格中创建动态列

Question

我希望为从服务器请求中检索到的 JSON 数据创建一些逻辑。从下面的原始数据可以看出，它是以特定格式接收的。

有一个 “balances” 条目，在本例中，它有 5 个不同的子值，其名称可能因给定用户而异。

例如：

---

• Barry 有 5 个银行账户，每个账户都有不同的余额。
• 梅丽莎有 2 个银行账户，每个账户都有不同的余额。
• Melissa 的银行账户与 Barry 的银行账户不同，反之亦然。
• 分配的天平 ID 号不一定与 Barry 和 Melissa 匹配。

---

在 Ext JS 网格中，需要显示的列标题必须根据 Barry 和 Melissa 的个人银行账户余额进行调整。

Barry 的 JSON 数据：

{
  "firstName": "Foo",
  "lastName": "Bar",
  "balances": 
  {
  Natwest: 9,
  BankofScotland: 2,
  Lloyds: 40,
  Halifax: 89,
  Lords: 12
  },
}

梅丽莎的 JSON 数据：

{
  "firstName": "Melissa",
  "lastName": "Bar",
  "balances": 
  {
  DifferentNatwest: 10,
  DiffferentBankofScotland: 45
  },
}

目前，我的商店/模型中只有一个映射，称为“余额”，它只接受一个值：

商店/模型定义：

fields: ['firstName', 'lastName', 'balances']

所以，当网格生成时，显然会出现以下问题，因为传递了多个值：

结果：

问题：

有谁知道我可以做些什么来让列在这个 Ext JS 网格中动态生成，这取决于为这个余额信息接收的 JSON 数据？

Answer 1

您需要创建网格列并为其动态存储。 我不知道是否还有更多“ExtJS”方式（更简单、自动创建），但我会做一个简单的解决方案。

1# 解决方案 - 多列

• 获取数据，获取 JSON 对象
• 基于 JSON 对象创建新的网格列
• 基于 JSON 对象创建具有正确记录的新存储（我 不要认为有模型可以在其中包含对象-您需要对其进行转换）
• 创建网格并向其中添加新的存储和列。

这里是最重要部分的代码sn-p：

    for (var key in d.balances) {
        bankAcountsColumns.push({
            xtype: 'gridcolumn',
            dataIndex: key,
            text: key
        });

        transformData[key] = d.balances[key];
        fields.push(key);
    }

    var myCustomColumns = [{
        xtype: 'gridcolumn',
        dataIndex: 'firstName',
        text: 'Name'
    }, {
        xtype: 'gridcolumn',
        dataIndex: 'lastName',
        text: 'LastName '
    }, {
        xtype: 'gridcolumn',
        text: 'Bank accounts',
        columns: bankAcountsColumns
    }]

    Ext.create('MyApp.view.MyGridPanel', {
        renderTo: Ext.getBody(),
        columns: myCustomColumns,
        store: {
            fields: fields,
            data: transformData
        }
    });

这是工作小提琴示例： https://fiddle.sencha.com/#view/editor&fiddle/1l5j

---

2#解决方案-一栏

如果您只想一列包含所有余额，则需要templatecolumn

在那里我将为 5 个项目创建模板（或者可以再次动态创建）： tpl:'{bank1name} {bank1value} {bank2name} {bank2value} ...'

而且您必须为新商店动态创建数据。

data:[
    { firstName: "Foo", lastName:"Scott",   bank1name: "Natwest", bank1value: "9" ... },
    { firstname: "Dwight",  lastName: "Bar",  ... bank5name: "" ...  }    
]