在ExtJS网格中创建动态列

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

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

例如：

---

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

---

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

Barry的JSON数据：

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

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

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

Melissa的JSON数据：

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

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

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

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

商店/模型定义：

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

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

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

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

结果：

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

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

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

问题：

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

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

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

---

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

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

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

以下是工作小提琴示例：

---

2#解决方案-一列

如果希望只有一列包含所有余额，则需要

在那里，我将为5个项目创建模板（也可以再次动态创建）：

tpl:'{bank1name}{bank1value}{bank2name}{bank2value}…'

然后，您必须为新存储动态创建数据

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

---

看看这个例子，它可以帮助你：谢谢。这是一个非常好的答案——我现在将看一看工作示例。再次感谢！大家好@pagep，我正在努力将解决方案1实施到一个多类项目中。我从上面的问题中得到了JSON数据，它被发送到帐户存储，然后帐户存储有一个“config:”链接/使用帐户模型，其中定义了['firstName'，'lastName'，'balances']字段。我不明白如何修改您在小提琴中编写的与此项目设置相关的代码？我希望这是有意义的。关于这一点，我提出了一个新问题：是否感兴趣。非常感谢。如果您查看fiddle

MyApp.store.MyStore

将与您的帐户存储相同。在您的商店中，您可以使用字段或模型/这无关紧要。我认为你不需要知道你商店里的模型，除非你想从中获得一些信息。根据你的下一个问题，你需要更多的信息，这个小评论部分可以提供。谢谢！这是有道理的，但是：“Ext.application（{name:'MyApp'，launch:function（）”部分在视图中的哪个位置？