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:

  • Anil cg

    Hi Marcus,
    I just want to know which ext js version did u use for it…is it Ext JS4?

  • Marcus Schiesser

    Nope, it was ExtJS 2.2 as far as I remember. Hope it still works with version 4. If not, you’re free to post an update….

  • Marcus Schiesser

    So now it is ExtJS 4 :)