Question

I have the following very simple Ext JS 4 script which is supposed to fetch two rows from an URL and display it in a Ext JS grid panel.

Ext.define('Entry', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'val' }
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'Entry',
    proxy: {
        type: 'ajax',
        //url: '/admin/ext-list-searches', // does not work
        url: '/server.php',  // works
        reader: {
            type: 'json',
            root: 'entries'
        }
    },
    autoLoad: true      
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [  
        {
            text     : 'id',
            dataIndex: 'id'
        },
        {
            text     : 'val',
            dataIndex: 'val'
        }
    ],
    title: 'Test',
    renderTo: 'ext-content'
});

I tested it with two URLs:

1. /server.php <- works
2. /admin/ext-list-searches <-fails

Both URL return the identical content (along with an identical HTTP response header):

{"entries":[{"id":1,"user":"Chris"},{"id":2,"user":"Paul"}]}

Case 1 works fine:

However, case 2 does not display anything:

The data is being properly loaded according to Firebug in both cases.

This does not make any sense to me. Are there any path-limitations I don’t know of?

I’ve seen that behavior in Chrome and Firefox 4. I am using Ext JS 4.0.1

Answer 1

By trial and error I was able to solve this problem. However my knowledge of Ext JS is to low to exactly know the reason.

The difference between the two URLs was the response time. Whenever I added a delay to make server.php respond later it behaved the same way as the other URL.

The way to fix it was to put the grid into a panel:

var displayPanel = new Ext.Panel({
    width    : 650,
    height   : 300,
    layout: 'fit',
    renderTo : 'ext-content',
    items    : [ grid ]
})

This is somehow related with the loading indicator.