Question

我想在List中显示以下API中的数据：

http://customer.appxtream.com/astro.apps.cms/jsonFeed.action/?service=astroSportsDataService&action=grabJsonText&mimeType=application/json&p1=HighlightNewsList&p2=EURO2012

当我获取数据时，Chrome网络向我显示已检索到所有元素但List仅显示API中最后一项的数据，这是我的代码：

查看

Ext.define('astro.view.HighliteNews', {
    extend: 'Ext.DataView',
    xtype: 'highliteNews',
    config:{

        title:'xren',
        store: 'highliteNewsStoreId',
        itemtap: true,
        scrollable:'horizontal',
        inline:{
            wrap:false
        },

        itemTpl:[
             '<div><img src="{imageLink}"/> </div>',
        ],
    },
});

商店

Ext.define('astro.store.HighliteNewsStore',{
    extend: 'Ext.data.Store',

    xtype:'highliteNewsStore',

    config:{
        model: 'astro.model.HighliteNewsModel',
        autoLoad: true,
        storeId: 'highliteNewsStoreId',

        proxy:{
            type:'ajax',

           url :'http://customer.appxtream.com/astro.apps.cms/jsonFeed.action',

            extraParams:{
                service:'astroSportsDataService',
                action:'grabJsonText',
                p1:'HighlightNewsList',
                p2:'EURO2012',
                mimeType:'application/json'

            },

            reader:{
                type:'json',
                rootProperty:'cmsHighlightNewsList',
            },

        },
    }
});

模型

Ext.define('astro.model.HighliteNewsModel',{
    extend: 'Ext.data.Model',

    config:{
        fields: ['imageLink'],

    }
});

因此，网络显示从API发送了3张图片，但列表仅显示最后一张图片。请帮忙

Answer 1

我解决了问题的人:)，Sencha和JsonP之间存在冲突，所以如果你为你的模型分配一个idproperty，问题就会解决：

config:{
    idProperty: 'HighliteIdProperty',
    fields: ['imageLink'],
}

Answer 2

我建议的一些事情：

向商店的加载事件添加侦听器

这只是检查商店中是否已加载所有数据。你可以用不同的方式做到这一点：

在控制器中

store.on({
  load:function(){
    console.log(store.getCount());
  }
});

或直接在具有侦听器属性

的商店配置中

listeners:{
  load:function(store){
    console.log(store.getCount());
  }
}

检查DOM

在网络检查器/ Firebug中，检查您的商品是否存在或只是最后一个。

我想你也可以在控制台中尝试这个命令：

Ext.DomQuery.select('div[class=x-dataview-item]').length

它将返回数据视图中的项目数。

为图片设置宽度和高度

我对动态加载的数据视图也有同样的问题。所有的图片都在DOM中，但是太小而无法看到。所以我建议你给他们一个定义宽度和高度的CSS类。

这就是我现在所能想到的。

希望这有帮助

Answer 3

感谢Arash提出这个问题和答案。我们面临类似的问题，发现我们没有定义模型。在我们的案例中定义模型。但是，当我们从youtube检索播放列表时，它可以正常工作，现在从谷歌电子表格中检索列表时。希望这有助于其他使用谷歌电子表格的人。

Answer 4

调整视图配置中的高度......这可能是个问题

Sencha touch 2：List仅显示从API检索的最后一项

4 个答案: