extjs4 - 带有远程（ajax）存储的数据视图不起作用答案

【问题标题】：extjs4 - DataView with remote(ajax) store not workingextjs4 - 带有远程（ajax）存储的数据视图不起作用
【发布时间】：2011-09-18 09:45:12
【问题描述】：

一段时间以来，我一直试图让 DataView（又名 Ext.view.View）与远程商店一起工作，但我无法让它工作。

于是我又回到了绘图板上，尝试基于 Sencha doc 的 dataview 组件 (from this page) 构建一个简单的。

当我使用默认示例非远程存储运行代码时，它工作正常。一旦我将存储转换为 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 是一个简单的 codeiginiter 控制器方法，如下所示：

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

使用内联数据，萤火虫显示：

使用 ajax 商店，萤火虫显示：

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

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

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

在挖掘了使用 firebug 创建的不同对象后，模型看起来有些奇怪。

原来在 Ext 文档中有一个错字..

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

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

我猜在使用内联数据时，模型的使用方式与远程存储不同（内联数据仍然需要模型，因为取出它会在阅读器上引发错误）。

【讨论】：