根据使用的URL，将远程数据加载到ExtJS-Grid-Panel失败

Question

我有以下非常简单的Ext JS 4脚本，它应该从URL中获取两行并将其显示在Ext JS网格面板中。

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'
});

我用两个网址测试了它：

1. /server.php＆lt; - works
2. /admin/ext-list-searches＆lt; -fails

两个URL都返回相同的内容（以及相同的 HTTP响应标头）：

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

案例1工作正常：



但是，案例2不显示任何内容：



在两种情况下，根据Firebug正确加载数据。

这对我没有任何意义。我不知道有任何路径限制吗？

我在Chrome和Firefox 4中看到了这种行为。我使用的是Ext JS 4.0.1

Answer 1

通过反复试验，我能够解决这个问题。然而，我对Ext JS的了解很少，以确切知道原因。

两个网址之间的差异是响应时间。每当我添加延迟以使server.php稍后响应时，其行为与其他URL的行为方式相同。

解决问题的方法是将网格放入面板：

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

这与加载指标有某种关联。