Dynamically Changing the Structure of a Grid in ExtJS 4.2

If you have a grid in ExtJS, it might happen that you want to change the columns of the grid depending on the data you receive from the server.
In my new pet project Bulks I was facing this exact problem, so I thought it might be worth sharing the solution with you.
In the example below we try to render differently structured JSON arrays in the same grid. The function getKeysFromJson retrieves the keys from such an array. With this
information we can build the ExtJS columns array easily in the createColumns function by mapping each key to a column definition object.
The function createStore further shows us how to create an ExtJS store from the JSON and the keys array.
The store and the columns array are needed to call the reconfigure function of the ExtJS grid which changes the data and column layout of the grid.
Play with the following small example – I hope it demonstrates the idea:

BTW: Don’t wonder about the Chinese characters, I am just trying to learn that language and as everyone I am very happy being able to write my first characters…

Adding Rows to a Grid in ExtJS 4.1

Note: Has been updated for ExtJS 4.1

In the last article we built a data grid mockup in ExtJS 4.1. Now we want to add some rows to the grid.
Firstly we need to create a model class to store a data. We’ve done that also in the previously article, but for the better understanding, here’s it again:

Having the Person class we can simply add new rows to the store (people in our case) by calling the add function with new instances of that class:

And again the stuff in action:

Building Mockups in ExtJS 4.1

Note: This post has been updated for ExtJS 4.1

In the early development phase it is usually a good idea to provide a mockup that is not using real data but some dummy data from memory. To do that for a grid in ExtJS we need to create a record class first. For a person this might look like this:

Then we need a store where instances of the Person class will be stored:

The store is initially loaded with data from peopleProxy which must be defined previously like this:

If we want to replace this in a later development phase with real data, we simply replace this proxy with an HttpProxy, which might look like this:

If we finally connect the store to a data grid, it looks like this: