在 Ext JS 网格中创建动态列

Question

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

有一个 "balances" 条目，在这种情况下，它有 5 个不同的 sub-values，其中的名称可能因给定用户而异。

例如：

巴里有 5 个银行账户，每个账户都有不同个余额。
Melissa 有 2 个银行账户，每个账户都有不同个余额。
Melissa 的银行账户与 Barry 的银行账户不同，反之亦然。
分配的 Balance 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
  },
}

目前，我的 store/model 中只有一个映射，名为 "balances"，它只有一个值：

Store/Model定义：

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
        }
    });

这是有效的 fiddle 示例： 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: "" ...  }    
]

在 Ext JS 网格中创建动态列

Creating dynamic columns in an Ext JS Grid

extjs

extjs4