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…

  • anant choubey

    Very Helpful code. Thanks. Keep sharing :)

  • sameer

    Very nice article. But I want pagination for grid Dynamically Chaged. So, can you please help me in this.
    Thanks

  • Hey Marcus,

    nice article. Came here, when having a problem on this issue with the pagination – same problem as sameer.

    So sameer, and surly all the others who habe this problem, the solution to the pagination problem is:

    1. You have to bind your new store to the pagingtoolbar by
    YOUR_PAGING_TOOLBAR.bindStore(NEW_STORE);

    2. You have to set the currentPage attribute of your new store, as he thinks he is still on page 1.
    NEW_STORE.currentPage = oldStore.lastOptions.page;

    This done the trick on my site 😉

    kind regards
    sven