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: