CODEWITHSUNDEEP
jsonsencha-touchextjs
nelsonpecora
nelsonpecora

Reputation: 300

How do I structure data for Ext.DataView?

Similar to this question, I can't get my DataView to actually show data. I tried to restructure my store, but I think I'm missing something. Here's what I've got so far:

App, Model, Store

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

Viewport and 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"
    }
]

Any ideas? All of the other questions that are similar to this use Ext.JsonStore, but the Sencha API docs say to do it this way.

UPDATE

The store is working fine. Here's what TestApp.stores.storeMe.data looks like:

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
    ...

Upvotes: 0

Views: 595

Answers (2)

nelsonpecora
nelsonpecora

Reputation: 300

I'm an idiot. I had:

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

I needed:

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

Upvotes: 1

hunteryxx
hunteryxx

Reputation: 70

Seems you don't have the json structure with the root called "data"? Try the change your json to:

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

And put a line -- root: 'data' -- in your reader.

Upvotes: 1

Related Questions