title: Creating dynamic columns in an Ext JS Grid
body: <p>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.</p>
  
  <p>There is a <strong>"balances"</strong> entry which, in this case, has 5 different sub-values, of which names can vary dependent upon a given user.</p>
  
  <p>For example:</p>
  
  <hr>
  
  <ul>
  <li>Barry has 5 bank accounts, each with <strong>different</strong> balances.</li>
  <li>Melissa has 2 bank accounts, each with <strong>different</strong> balances.</li>
  <li>Melissa's bank accounts are different to Barry's bank accounts, and vise versa. </li>
  <li>The Balance ID numbers that are assigned, may not necessarily match both Barry and Melissa.</li>
  </ul>
  
  <hr>
  
  <p>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.</p>
  
  <p><strong>Barry's JSON Data:</strong></p>
  
  <pre><code>{
    "firstName": "Foo",
    "lastName": "Bar",
    "balances": 
    {
    Natwest: 9,
    BankofScotland: 2,
    Lloyds: 40,
    Halifax: 89,
    Lords: 12
    },
  }
  </code></pre>
  
  <p><strong>Melissa's JSON Data:</strong></p>
  
  <pre><code>{
    "firstName": "Melissa",
    "lastName": "Bar",
    "balances": 
    {
    DifferentNatwest: 10,
    DiffferentBankofScotland: 45
    },
  }
  </code></pre>
  
  <p>At the moment, I only have one mapping in my store/model, called "balances" which only takes one value:</p>
  
  <p><strong>Store/Model definitions:</strong></p>
  
  <pre><code>fields: ['firstName', 'lastName', 'balances']
  </code></pre>
  
  <p>So, obviously the following issue occurs when the grid is generated, as more than one value is being passed:</p>
  
  <p><strong>Results:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/G93Py.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G93Py.png" alt="Grid"></a>
  </p>
  
  <p><strong>The Question:</strong></p>
  
  <p>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? </p>