Question

The model:

Ext.ns('Workout.Models.user');
Ext.regModel('User', {
    fields: [{
        name: 'member_id',
        type: 'int'
    }, {
        name: 'first_name',
        type: 'string'
    }, {
        name: 'last_name',
        type: 'string'
    }, {
        name: 'username',
        type: 'string'
    }, {
        name: 'password',
        type: 'string'
    }, {
        name: 'dob',
        type: 'date',
        dateFormat: 'Y-m-d'
    }, {
        name: 'email_address',
        type: 'string'
    }, {
        name: 'is_active',
        type: 'int'
    }],
    proxy: {
        type: 'ajax',
        format: 'json',
        url: '../../_dev/json_fixtures/users.json',
        reader: {
            type: 'json',
            root: 'users'
        },
        root: 'users'
    }
});

The Store:

Ext.ns('Workout.Stores');
Workout.Stores.user = new Ext.data.Store({
    model: 'User',
    storeId : 'Workout.Stores.user',
    sorters: [
        'last_name',
        'first_name',
        'member_id'
    ],
    autoLoad: true
});

The Grid:

Ext.ns('Workout.User');
Workout.User.grid = new Ext.grid.Panel({
    store: 'Workout.Stores.user',
    columns:[{
        text: 'Created At',
        dataIndex: 'created_at'
    }, {
        text: 'First Name',
        dataIndex: 'first_name'
    }]
});

The JSON File

{
    "users":[{
        "created_at":"2011-04-01 14:13:34",
        "member_id":"14453",
        "first_name":"Jemima",
        "last_name":"Petersen",
        "username":"jpeterson",
        "password":"TDW29HOH7WY",
        "dob":"1960-07-03",
        "email_address":"[e-mail]"
    }]
}

Wheh I load my HTML page, the grid is empty. However, if I supply raw data to the store via the data param, it loads. If I call User.load() manually via the console, nothing happens. If i call User.load() and pass in a valid JSON object,nothing happens.

Is there something I’m missing / not doing right?

Answer 1

You have done everything expect set the height of your grid panel. You need to set the height to display the records. Here is what I would add to your grid panel config:

height: 300

Now, apart from this, you have other problems like you have not defined created_at in your User model. If you plan to display the value in your grid, you need to update your model as well.