Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating dynamic columns in an Ext JS Grid

Tags:

extjs

extjs4

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?

like image 810
greenTree Avatar asked Oct 15 '25 04:10

greenTree


1 Answers

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: "" ...  }    
]
like image 168
pagep Avatar answered Oct 17 '25 17:10

pagep



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!