extjs4 - 带有远程（ajax）存储的 DataView 不起作用

Question

我一直在尝试让 DataView（又名 Ext.view.View）与远程存储一起使用一段时间，但我无法让它工作。

所以我回到绘图板并尝试基于 Sencha 文档的 dataview 组件构建一个简单的组件（从此页面）。

当我使用默认示例非远程存储运行代码时，它工作正常。一旦我将存储转变为 ajax 数据存储，它就会停止工作。

这是我的代码：

Ext.define("Admin.TestDataView",{

    extend : 'Ext.DataView'

    ,initComponent: function()
    {

        Ext.regModel('Image', {
            Fields: [
                {name:'src', type:'string'},
                {name:'caption', type:'string'}
            ]
        });

        this.thestore = Ext.create('Ext.data.Store', {
            id:'imagesStore',
            model: 'Image',

            // data commented out and replaced with a proxy:
            /* 
            data: [
                {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
                {src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
                {src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
                {src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
            ],
            */      
            proxy: {
                type: 'ajax',
                url : '/test/somedata',
                reader: {
                    type: 'json',
                    root: 'results'
                }
            },
            autoLoad:true
        });



        var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="thumb-wrap">',
                  '<img src="{src}" />',
                  '<br/><span>{caption}</span>',
                '</div>',
            '</tpl>'
        );

        Ext.apply(this, {
            store: Ext.data.StoreManager.lookup('imagesStore'),
            tpl: imageTpl,
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images available',
            renderTo: Ext.getBody()
        });

        this.callParent(arguments);

    }
});

正如您所看到的，这本质上是文档中的示例代码，使用远程存储而不是内联数据。

/test/somedata url 是一个简单的 codeiniter 控制器方法，如下所示：

function somedata()
{
    $data =array(
        'success'=>true,
        'results'=> array(
                array('src'=>'http://www.sencha.com/img/20110215-feat-drawing.png', 'caption'=>'Drawing & Charts'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-data.png', 'caption'=>'Advanced Data'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-html5.png', 'caption'=>'Overhauled Theme'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-perf.png', 'caption'=>'Performance Tuned')
        ));
    echo(json_encode($data));   

}

一切似乎都很好。 Firebug 控制台显示正确的请求，并且数据正确返回（我有很多其他控制器返回其他数据，并且它们工作正常）..

除了视图是空的。

有趣的是，如果我向 dataview 子类添加一个prepareData 方法，如下所示：

,prepareData: function(data)
{
    console.log("prepareData(%o)",data);    
    return data;
}

对于内联数据，firebug 会显示以下内容：

使用 ajax 存储，firebugs 显示如下：

一个有趣的点是，prepareData 方法被调用了 4 次，这表明在这两种情况下，都加载了 4 条记录，但使用远程存储时，记录数据是空的..

有什么想法吗？我做错了什么？

Answer 1

在深入研究了用 Firebug 创建的不同对象后，模型看起来有些奇怪。

事实证明，Ext 文档中有一个拼写错误。

在模型中，文档有字段 [...]，

    Ext.regModel('Image', {
        fields: [  // <-- here
            {name:'src', type:'string'},
            {name:'caption', type:'string'}
        ]
    });

我猜这应该是使用内联数据时的字段，该模型的使用方式与远程存储（内联数据仍然需要该模型，因为将其取出会给读者带来错误）。