Category: Code Examples

Problem

You want to display a grid which lists a series of objects.

Solution

Use a GridPanel (aka ListView):

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

Ext.onReady(function() {
    var trackStore = new Ext.data.Store({
        storeId: 'soundCloudStore',

        proxy: {
            type: 'ajax',
            url: 'blues.json',
            reader: {
                type: 'json',
                idProperty: 'id'
            }
        },
        fields:['duration', 'genre', 'created_at', 'kind', 'title', 'id']
    });

    trackStore.load(
        function() { 
            Ext.create('Ext.grid.Panel', {
                title: 'Tracks',
                store: trackStore,
                columns: [
                    { header: 'Title', dataIndex: 'title' },
                    { header: 'Duration',  dataIndex: 'duration' },
                    { header: 'Genre', dataIndex: 'genre' },
                    { header: 'Created At', dataIndex: 'created_at' },
                    { header: 'Kind', dataIndex: 'kind' }
                ],
                height: 400,
                width: 550,
                renderTo: Ext.getBody()
         });
    });
});

Discussion

Most of the Ext examples for rendering grids show how to do it with static data – this is rarely what you want. This example loads JSON data copied from a call to an API outside our control, SoundCloud. Retrieving data across domains may require additional configuration.

It’s important to set the “id” property in the proxy configuration, as Ext grids use this to uniquely identify rows.

Make sure to initialize the page inside Ext.onReady and include the necessary script and CSS files (e.g. ext-all-debug.js and ext-all.css).

ext-all.css is in resources\css of the Ext distribution zip file. Ext-all-debug.js is in the root of the distribution.

This must be run from a web server to work – the JSON requests will not work if the originating page is a file:// URL.

GridPanel is the Ext4.0 name, and ListView is the 3.x name.