Question

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

所以我回到绘图板并尝试基于Sencha doc的数据视图组件（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);

    }
});

正如您可以从doc中看到这样的示例代码，使用远程存储而不是内联数据。

/ 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控制台显示正确的请求并正确返回数据（我有很多其他控制器返回其他东西的数据，它们工作正常）..

除了视图为空。

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

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

使用内联数据，firebug显示： With

使用ajax商店，firebugs显示： Without

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

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

Answer 1

在挖掘出用firebug创建的不同对象后，模型看起来很奇怪。

原来在Ext doc中有一个拼写错误。

在模型中，doc有Fields [...]，应该是字段

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

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

extjs4 - 带远程（ajax）存储的DataView无法正常工作

1 个答案: