Ext JS 4 Data Package Examples

This page contains examples that demonstrate some of the new data package functionality. The examples here all use the same three models from a fictional blogging application - User, Post and Comment. See our introductory blog post on the topic here.

1. Create a Model instance

Here we're simply creating an instance of the User model. In these examples, our models are placed in the global namespace for the sake of simplicity, so we can just call new User:

var ed = new User({
    name: 'Ed Spencer',
    age: 25

alert("User's name is " + ed.get('name'));

2. Loading data into a Store

Now we're going to load a set of fictional user data into a Store. Here we're defining a Store that uses the User Model. We're going to configure our Store to use an AjaxProxy, which will load data from data/users.json (click the link to see the contents of that JSON file). To enable the AjaxProxy to decode the response, we set up a JsonReader, telling it that it will find the data we want inside the 'users' property of the response - we do this by setting the JsonReader's root property:

var store = new Ext.data.Store({
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users'

//Loads the store, which calls our callback function when it has loaded
//There are 4 records in the JSON response, so this should alert 4:
store.load(function(records) {
    alert("Loaded " + store.getCount() + " records");

3. Using Associations and Nested Loading

Associations are a brand new feature of Ext JS 4. They enable you to easily express relationships between Models. In these examples, each User model is linked to any number of Posts (see the User model code). Here we load a User model and examine his Posts. For each Post, we can also interact with its Comments.

If you open up the User model source code, you'll see that we defined a RestProxy on it. This enables us to load and save Users without using a Store. RestProxy is a special type of AjaxProxy that knows how to create RESTful server urls. In this case, the url to load the user data from (data/users/1.json) is automatically generated by the Proxy:

User.load(1, {
    success: function(user) {
        //user.posts() is a function that is created by the hasMany association we set up on the User model
        var posts = user.posts(),
            name  = user.get('name');
        alert("User "+ name + " has " + posts.getCount() + " posts");
        posts.each(function(post) {
            //similarly, post.comments() is created by the hasMany association we set up on the Post model
            var title = post.get('title'),
                count = post.comments().getCount();
            alert(title + " has " + count + " " + (count == 1 ? 'comment' : 'comments'));
        //it's easy to chain calls across several associations
        var message = user.posts().last().comments().last().get('message');
        alert("Latest Comment says: " + message);