未显示商店的 Sencha Dataview

Question

我是 sencha touch 的新手，在使用带有 ajax 存储的 dataview 时遇到问题。

这里遵循我的代码：

在我的 app.js 的启动部分：

Ext.define('SocializeApp.model.Friends', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name:'name' ,type:'string'},
                {name:'id' ,type:'string'},
                {name:'img' ,type:'string'}
            ]
        }
    });
    Ext.define('SocializeApp.store.FriendStore', {
        extend: 'Ext.data.Store',
        config: {
            model: 'SocializeApp.model.Friends',
            storeId: 'FriendStore',
            proxy: {
                type: 'ajax',
                url: 'http://socialize.localhost.com/friends.php',
                reader: {
                    type: 'json',
                    rootProperty: 'friends'
                },
                autoLoad: 'true'
            },

        }
    });

    Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));

在 Main.js 中

  Ext.define('SocializeApp.view.Main', {
    extend: 'Ext.tab.Panel',
    fullscreen: true,
    xtype: 'main',
    requires: ['Ext.TitleBar'],
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'Amigos',
            iconCls: 'team',
            items: [{
                xtype: 'dataview',
                store: 'FriendStore',
                scrollable: {
                    direction: 'vertical'
                },
                tpl: ['{img} {id} {name}']
            }]
        }, {
            title: 'time',
            iconCls: 'time',
            items: [{
                html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
            }]
        }, {
            title: 'Interesses',
            iconCls: 'bookmarks',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Getting Started'
            }, {
                xtype: 'video',
                url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
            }]
        }]
    }
});

我有点迷茫，我使用 store 作为变量进行测试，在控制台中它为我提供了正确的数据，但没有选择退出此数据视图。

仅供参考 JSON

{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}

非常感谢任何帮助。

谢谢，

Answer 1

试试这些（代码结合了这些想法）。

1 - 给你的数据视图一个 itemId，并在你的视图初始化方法中加载商店。可能还想尝试将 autoLoad 设置为 false。

2 - 有时我也会明确给出完整的商店引用，而不仅仅是 id，例如 Ext.getStore('FriendStore')

3 - 你在使用 MVC 吗？您是否在 app.js 中声明了您的商店/模型？

Ext.application({
     name: 'yourapp',
     stores: ['FriendStore'],
     models: ['Friends'],
     launch: function() {   
          ...
     }
});

4 - 或者，只是想到这个.. 将您的 tpl 更改为 'itemTpl'

Ext.define('SocializeApp.view.Main', {
    extend: 'Ext.tab.Panel',
    fullscreen: true,
    xtype: 'main',
    requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'Amigos',
            iconCls: 'team',
            items: [{
                itemId: 'FriendsDataview',
                xtype: 'dataview',
                store: Ext.getStore('FriendStore'),
                scrollable: {
                    direction: 'vertical'
                },
                itemTpl: ''.concat(
                    '<div>{img} {id} {name}</div>'
                )
            }]
        }, {
            title: 'time',
            iconCls: 'time',
            items: [{
                html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
            }]
        }, {
            title: 'Interesses',
            iconCls: 'bookmarks',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Getting Started'
            }, {
                xtype: 'video',
                url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
            }]
        }]
    },

    initialize: function(){
        var store = Ext.getStore('FriendStore');
        var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
        dv.setStore(store);
        store.load(function(){
            console.log(this); 
        });
    }
});