4

I am looking to create some logic for JSON data retrieved from a server request. As you can see from the raw data below, it is received in a particular format.

There is a "balances" entry which, in this case, has 5 different sub-values, of which names can vary dependent upon a given user.

For example:


  • Barry has 5 bank accounts, each with different balances.
  • Melissa has 2 bank accounts, each with different balances.
  • Melissa's bank accounts are different to Barry's bank accounts, and vise versa.
  • The Balance ID numbers that are assigned, may not necessarily match both Barry and Melissa.

In the Ext JS grid, the column headings which need to be displayed, must adjust to both Barry and Melissa's individual bank account balances.

Barry's JSON Data:

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

Melissa's JSON Data:

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

At the moment, I only have one mapping in my store/model, called "balances" which only takes one value:

Store/Model definitions:

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

So, obviously the following issue occurs when the grid is generated, as more than one value is being passed:

Results:

Grid

The Question:

Does anyone know what I can do to get the columns to dynamically generate in this Ext JS grid, dependant upon the JSON data being received for this balances information?

1

1 Answer 1

6

What you need is to create the grid columns and store for it dynamically. I don't know if there is some more "ExtJS" way (simpler, automatic creation) but I would do a straightforward solution.

1# Solution - with multiple columns

  • Get the data, get the JSON object
  • Based on the JSON object create the new grid columns
  • Based on the JSON object create the new store with correct records (I don't think there is model which can have object in it - you need to transofrm it)
  • Create the grid and add the new store and columns to it.

Here is the code snippet with the most important part:

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

Here is working fiddle example: https://fiddle.sencha.com/#view/editor&fiddle/1l5j


2# Solution - one column

If you want to have only one column with all the balances, you would need templatecolumn

In there I would create template for 5 items (or it can be again created dynamically): tpl:'{bank1name} {bank1value} {bank2name} {bank2value} ...'

And than you would have to dynamically create the data for the new store.

data:[
    { firstName: "Foo", lastName:"Scott",   bank1name: "Natwest", bank1value: "9" ... },
    { firstname: "Dwight",  lastName: "Bar",  ... bank5name: "" ...  }    
]
5
  • Thank you. This is a fantastic answer - I will take a look at the working example now. Thanks again!
    – greenTree
    Commented Nov 25, 2016 at 9:12
  • Hi again @pagep, I am struggling to implement Solution #1 into a multi-class project. I have JSON data from my question above, which is sent to the account store, which then has a "config:" which links/uses an account model, where the ['firstName', 'lastName', 'balances'] fields are defined. I don't understand how to adapt the code you wrote in your Fiddle, relevant to this project setup? I hope that makes sense.
    – greenTree
    Commented Nov 25, 2016 at 11:55
  • I have created a new question regarding this: stackoverflow.com/questions/40805044/… if interested. Thank you!
    – greenTree
    Commented Nov 25, 2016 at 12:26
  • 1
    If you look at the fiddle MyApp.store.MyStore would be the same as your account store. In your store you can use either fields or model / it doesn't matter. I think that you don't need to know about the model in your store unless you want to get some information from it. Hm according to your next Q you need more info that this small comment section can provide.
    – pagep
    Commented Nov 25, 2016 at 13:07
  • Thanks! That makes sense, but where does the: "Ext.application({ name: 'MyApp', launch: function ()" section go, is that in the view?
    – greenTree
    Commented Nov 25, 2016 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.