带有 Sencha Touch Ext.List 的 Google 电子表格 API答案

【问题标题】：Google spreadsheed API with Sencha Touch Ext.List带有 Sencha Touch Ext.List 的 Google 电子表格 API
【发布时间】：2013-05-14 12:40:56
【问题描述】：

我正在使用 Sencha touch 2.1 构建一个移动应用程序。我正在尝试加载一个谷歌电子表格作为列表的数据源。

我已将 Google 电子表格公开，您可以在此链接中找到它：

https://docs.google.com/spreadsheet/pub?key=0AhW0xtL9j2bAdHlwRE1qcE1WdDVLa2dRdDBxNTJBV0E&output=html

但是我无法让它工作。

这是我目前的代码：

模型

Ext.define('MyApp.model.InfoList', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            'Title',
            'Description',
            'Icon'
        ],
        idProperty: '_id'
    }
});

商店

Ext.define('MyApp.store.InfoList', {
extend : 'Ext.data.Store',

config : {
    model : 'MyApp.model.InfoList',
    proxy: {
        type: 'jsonp',
         url :  'https://spreadsheets.google.com/feeds/list/0AhW0xtL9j2bAdHlwRE1qcE1WdDVLa2dRdDBxNTJBV0E/od6/public/basic?alt=json-in-script',
        reader: {
            type: 'json',
            root: 'feed.entry'
        }
    }

}
});

观点

Ext.define('MyApp.view.home.infolist', {
    extend : 'Ext.List',
    xtype : 'infoListView',
    disableSelection: true,
    config : {
        title : 'Info List',
        itemTpl: [
                    '<div class="itemInfo">',
                        '<div class="iconDiv">',
                            '<img src="{Icon}" class="icon"/>',
                        '</div>', 
                        '<div class="descriptionDiv">',
                            '<div class="title">{Title}</div>',
                            '<div class="description">{Description}</div>',
                        '</div>',
                        '<div class="disclosureDiv">',
                            '<img src="images/infoListDisclosure.png" class="iconImage"/>',
                        '</div>',
                        '<div class="clear"></div>',
                     '</div>',
                ].join(''),
        store : 'InfoList'
    }
});

列表始终为空。如果我在代理中使用 jsonp 而不是 json，应用程序将停止运行。

有没有办法在警报中查看我从代理获得的响应？或任何可能是什么问题的迹象表示赞赏

PS：我在 IBM Worklight 上构建应用程序，但我使用 sencha 进行编码。我不确定这是否会影响任何事情

谢谢

【问题讨论】：

标签： json sencha-touch-2 google-spreadsheet-api

【解决方案1】：

JSON 响应中的属性都是小写的，例如“标题”和“内容”，而您的模型字段名称的第一个字母是大写的，例如“标题”和“描述”。而且 JSON 中没有像 'Description' 这样的字段，它的 'content' 和 'title' 数据都在 '$t' 属性中。

我建议您转储并在控制台中查看解析的 JSON 对象，以了解如何正确呈现其属性。

还有一件事，而不是使用：

https://spreadsheets.google.com/feeds/list/0AhW0xtL9j2bAdHlwRE1qcE1WdDVLa2dRdDBxNTJBV0E/od6/public/basic?alt=json-in-script

使用这个：

https://spreadsheets.google.com/feeds/list/0AhW0xtL9j2bAdHlwRE1qcE1WdDVLa2dRdDBxNTJBV0E/od6/public/values?alt=json-in-script

将列作为entry 对象的属性。在这种情况下，您可以像这样定义您的模型：

Ext.define('MyApp.model.InfoList', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {name : 'id',type : 'string', mapping:'id.$t'},
            {name : 'Title',type : 'string', mapping:'gsx$Title.$t'},
            {name : 'Description',type : 'string', mapping:'gsx$Description.$t'},
            {name : 'Icon',type : 'string', mapping:'gsx$Icon.$t'}
        ],
        idProperty: 'id'
    }
});

【讨论】：