Sencha Dataview与商店没有显示

时间:2014-08-05 19:14:22

标签: sencha-touch-2 sencha-touch-2.1

我是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'
            }]
        }]
    }
});

我有点迷茫,我使用商店作为变量进行测试,在控制台中它给了我正确的数据,但没有选择此数据视图。

仅供参考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"}]}

我真的很感激任何帮助。

THX,

1 个答案:

答案 0 :(得分:1)

尝试这些(代码将想法结合起来)。

1 - 为您的dataview提供itemId,并在您的view initialize方法中加载商店。可能还想尝试将autoLoad设置为false。

2 - 有时我也明确地给出完整的商店参考而不仅仅是id,对于ex Ext.getStore(&#39; FriendStore&#39;)

3 - 你在使用MVC吗?你在app.js中声明了你的商店/模特吗?

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

4 - 或者,只是想到这一点......将你的tpl更改为&item 39p&#39;

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