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....

December 21, 2013 · 1 min · admin

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: Ext.define('Person', { extend: 'Ext.data.Model', fields: ['firstName', 'lastName'] }); 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:...

February 27, 2009 · 1 min · admin

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: Ext.define('Person', { extend: 'Ext.data.Model', fields: ['firstName', 'lastName'] }); Then we need a store where instances of the Person class will be stored:...

February 27, 2009 · 1 min · admin