在 Ext JS 网格中创建动态列

Question

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

有一个“余额”条目，在本例中，它有 5 个不同的子值，其中的名称可以根据给定用户而变化。

例如：

---

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

---

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

巴里的 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 对象创建具有正确记录的新商店（我认为没有模型可以在其中包含对象 - 您需要对其进行转换）
• 创建网格并向其中添加新商店和列。

这是最重要部分的代码片段：

    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: "" ...  }    
]