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:
var people = Ext.create('Ext.data.Store', {
model: 'Person',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'root'
}
}
});
people.load();
The store is initially loaded with data from peopleProxy
which must be defined previously like this:
var peopleProxy = new Ext.data.MemoryProxy({
root: [{
firstName: 'Homer',
lastName: 'Simpson'}]
});
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:
var peopleProxy = new Ext.data.HttpProxy({
url: '/people.xml'
}),
If we finally connect the store to a data grid, it looks like this: