Création de colonnes dynamiques dans une grille Ext JS

Question

Je cherche à créer une logique pour les données JSON extraites d'une requête serveur. Comme vous pouvez le voir à partir des données brutes ci-dessous, il est reçu dans un format particulier.

Il y a une entrée "balances" qui, dans ce cas, a 5 sous-valeurs différentes, dont les noms peuvent varier en fonction d'un utilisateur donné.

Par exemple:

---

• Barry a 5 comptes bancaires, chacun avec différents soldes. Melissa a 2 comptes bancaires, chacun avec soldes différents.
• Les comptes bancaires de Melissa sont différents des comptes bancaires de Barry, et vice versa.
• Les numéros d'ID Balance attribués ne correspondent pas forcément à Barry et à Melissa.

---

Dans la grille Ext JS, les en-têtes de colonnes qui doivent être affichées, doivent s'adapter à la fois Barry et les soldes des comptes bancaires individuels de Melissa.

JSON Barry données:

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

JSON de Melissa données:

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

À l'heure actuelle, je n'ai une correspondance dans mon magasin/modèle, appelés "soldes" qui prend seulement une valeur:

Définitions de magasin/modèle:

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

Alors, évidemment la question suivante se produit lorsque la grille est générée, comme plus d'une valeur est passée:

Résultats:

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

La question :

Est-ce que quelqu'un sait ce que je peux faire pour générer dynamiquement les colonnes dans cette grille Ext JS, en fonction des données JSON reçues pour ces informations de soldes?

Answer 1

Ce dont vous avez besoin est de créer les colonnes de la grille et de les stocker dynamiquement. Je ne sais pas s'il y a un peu plus de "ExtJS" (création plus simple et automatique) mais je ferais une solution simple.

1 # Solution - avec plusieurs colonnes

• Obtenir les données, obtenir l'objet JSON
• Sur la base de l'objet JSON créer les nouvelles colonnes de grille
• Sur la base de l'objet JSON créer les nouveau magasin avec des enregistrements corrects (I ne pense pas qu'il existe un modèle qui peut avoir un objet - vous devez le transposer)
• Créez la grille et ajoutez-y le nouveau magasin et les colonnes.

Voici l'extrait de code avec la partie la plus importante:

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

Ici travaille exemple violon: https://fiddle.sencha.com/#view/editor&fiddle/1l5j

---

2 # Solution - une colonne

Si vous voulez avoir une seule colonne avec tous les soldes, vous devez templatecolumn

Dans là, je créerais modèle pour 5 articles (ou il peut être à nouveau créé dynamiquement): tpl:'{bank1name} {bank1value} {bank2name} {bank2value} ...'

Et que vous devez créer dynamiquement les données pour la nouveau magasin.

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