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…