ExtJS ListView Example

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.

2 Replies to “ExtJS ListView Example”

  1. Couple of things to note:
    1. You are obviously creating a grid panel, not a grid view.
    2. You should use data Models instead of fields on the store.
    3. I would create the panel first and then load the store. Your grid will automatically refresh with new data after load and your panel will render faster.

    1. Good points, thanks for taking the time to look. I switched the text to reference GridPanel, instead of GridView (for anyone looking at this later, Ext.grid.View is a private class used by GridPanel). I’ll keep the other notes in mind as I work on more examples.

Leave a Reply

Your email address will not be published. Required fields are marked *