Question

与this question类似，我无法让我的DataView实际显示数据。我试图重组我的商店，但我想我错过了什么。这是我到目前为止所得到的：

应用，型号，商店

Ext.regApplication({
    name: 'TestApp',
    launch: function() {
        this.viewport = new TestApp.views.Viewport();
    }
});

TestApp.models.StoreMe = Ext.regModel('TestApp.models.StoreMe', {
    fields: [
        'id',
        'name',
        'age'
    ]
});

TestApp.stores.storeMe = new Ext.data.Store({
    model: 'TestApp.models.StoreMe',
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json'
        }
    },
    autoLoad: true
});

视口和DataView

TestApp.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    items: [
        {
            id: 'dataView',
            xtype: 'dataview',
            store: TestApp.stores.storeMe,
            itemSelector: 'div.dataViewItem',
            emptyText: 'NO DATA',
            tpl: '<tpl for "."><div class="dataViewItem">ID: {id}<br />Name: {name}<br />Age: {age}</div></tpl>'
        }
    ]
});

JSON

[
    {
        "id": "1",
        "name": "sam",
        "age": "4"
    },
    {
        "id": "2",
        "name": "jack",
        "age": "3"
    },
    {
        "id": "3",
        "name": "danny",
        "age": "12"
    }
]

有什么想法吗？所有与此类似的问题都使用Ext.JsonStore，但Sencha API文档说这样做。

更新

商店工作正常。这是TestApp.stores.storeMe.data的样子：

Ext.util.MixedCollection
    ...
    items: Array[3]
        0: c
            data: Object
                age: "4"
                id: "1"
                name: "sam"
        1: c
        2: c
        length: 3
        __proto__: Array[0]
    keys: Array[3]
    length: 3
    ...

Answer 1

似乎你没有带有名为“data”的根的json结构？尝试将你的json改为：

{
    "data": [ {
        "id": "1",
        "name": "sam",
        "age": "4"
    }, {
        "id": "2",
        "name": "jack",
        "age": "3"
    }, {
        "id": "3",
        "name": "danny",
        "age": "12"
    } ]
}

并在你的读者中添加一个行根：'数据'。

Answer 2

我是个白痴。我有：

tpl: '<tpl for "."><div class="dataViewItem">ID: {id}<br />Name: {name}<br />Age: {age}</div></tpl>'

我需要：

tpl: '<tpl for=".">...</tpl>'

如何为Ext.DataView构建数据？

2 个答案: