Question

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

有一个“余额”条目，在这种情况下，有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
  },
}

Melissa的JSON数据：

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

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

商店/型号定义：

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

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

结果：

Grid http://i63.tinypic.com/2uscsnc.png

问题：

有没有人知道我可以做什么来使这个Ext JS网格中的列动态生成，这取决于为此余额信息收到的JSON数据？

Answer 1

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

1＃解决方案 - 包含多列

获取数据，获取JSON对象
基于JSON对象创建新的网格列
基于JSON对象创建具有正确记录的新商店（I 不要认为有模型可以有对象 - 你需要转换它）
创建网格并向其添加新商店和列。

以下是包含最重要部分的代码段：

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

在Ext JS Grid

1 个答案: