在Ext JS Grid中创建动态列

Question

在Ext JS Grid中创建动态列

extjsextjs4

4

我希望创建一些逻辑来处理从服务器请求中检索到的JSON数据。如下所示，可以看到它以特定格式接收。

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

例如：

Barry有5个银行账户，每个账户的余额不同。
Melissa有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
  },
}

目前，我的store/model中只有一个映射，称为“balances”，它只接受一个值：

Store/Model的定义：

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

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

结果：

问题：

有人知道我该怎么做才能让这个 Ext JS 表格中的列根据接收到的余额信息的 JSON 数据动态生成吗？

- greenTree

请查看此示例，它可能会对您有所帮助：https://www.sencha.com/forum/showthread.php?238780-Dynamic-fields-and-columns-in-a-grid - iceblade

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pagep · Accepted Answer

你需要做的是动态创建网格列和存储。我不知道是否有更多“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: "" ...  }    
]