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:

people.add(new Person({
    firstName: 'Ned',
    lastName: 'Flanders'
}));

And again the stuff in action: