Sencha touch:JSONP解析

时间:2011-11-06 10:21:05

标签: sencha-touch jsonp

型号:

app.models.Category = Ext.regModel("Category", {
    fields: [
        { name: 'CategoryId', type: 'int' },
        { name: 'ImageUrl', type: 'string' },
        { name: 'ImageUrlFile', type: 'string' },
        { name: 'CategoyName', type: 'string' }
    ]
});

存储

app.stores.CategoryStore = new Ext.data.Store({
    id: 'CategoryStore',
    model: 'Category',
    autoLoad: true,
    proxy: {
        type: 'scripttag',
        url: 'http://localhost:1303/admin/categoriesservice/getcategories',
        mehod: 'GET', //not needed
        callbackKey: 'callback', //not needed
        reader: {
            type: 'json',
            root: 'categories'//not needed with my JSONP
        },
        afterRequest: function (request, success) {
            console.log("afterRequest");
            if (success) {
                console.log("success");
            } else {
                console.log("failed");
            }
            console.log(request);
        }
    }
});

控制器:

Ext.regController('Home', {
    index: function () {
        if (!this.indexView) {
            this.indexView = this.render({
                xtype: 'HomeIndex'
            });
            this.items = [app.views.HomeIndex];
        }
        app.viewport.setActiveItem(this.indexView);//this what i've missed
    }
});

查看

app.views.HomeIndex = Ext.extend(Ext.DataView, {
    html: '<div class="gallery-view" style="display: block;width: 300px;border: 1px solid #fff;height: 300px;"></div>',
    store: app.stores.CategoryStore, //full namespace needed
    itemSelector: 'div.node',
    initComponent: function () {
        this.tpl = new Ext.XTemplate(
                    '<div style="padding:10px 5px 5px 5px;">',
                        '<tpl for=".">',
                            '<div class="node" style="background:url({ImageUrl});">',
                            '</div>',
                        '</tpl>',
                    '</div>'
        );
    //appened to successful solution 
    this.dataView = new Ext.DataView({
        store: this.store,
        tpl: this.xtpl,
        itemSelector: 'div.node'
    });
    this.items = [this.dataView];
        app.views.HomeIndex.superclass.initComponent.apply(this, arguments);
    }
});
Ext.reg('HomeIndex', app.views.HomeIndex);

JSONP结果:

GetCategories([{"CategoryId":101,"CategoyName":"אוכל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/rest.png","ImageUrlFile":null,"InsertDate":"\/Date(1314507534000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":99,"CategoyName":"הצגות ומופעים","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/shows.png","ImageUrlFile":null,"InsertDate":"\/Date(1314442037000)\/","IsActive":true,"ApplicationId":100,"Applications":null},{"CategoryId":111,"CategoyName":"בריאות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/spa.png","ImageUrlFile":null,"InsertDate":"\/Date(1314856845000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":142,"CategoyName":"נופש ותיירות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/vacation.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":143,"CategoyName":"ביגוד","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/clothes.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":144,"CategoyName":"אתרים ואטרקציות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/attraction.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":105,"CategoyName":"חשמל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/elctronic.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null}]);

例外: 未捕获的TypeError:无法读取未定义的属性“长度”

问题: 帮助我如何通过存储或任何其他方式解析JSONP问题???

3 个答案:

答案 0 :(得分:1)

您已在阅读器中设置此内容

reader: {
            type: 'json',
            root: 'categories'
        }

我在json数据中看不到categories元素。检查这是否正确或将其添加到您的json以便可能正常工作

{"categories":[ ...//old json //..]}

答案 1 :(得分:0)

当我试图定义

function GetCategories(data){console.log(data);}

然后调用jsonp响应(通过ctrl + c / ctrl + v进入控制台),我成功了,这意味着数据是一个有效的json字符串。
但是当我检查你的代码时,我还没有看到定义该函数的机制(GetCategories)。

我必须说,我对sencha不太熟悉。但是我觉得这个问题是没有创建回调函数。

我看到你定义了一个'callbackKey:'回调'' 在sencha文档中有哪些地方可以让你定义'callbackValue:'GetCategories''等等?试着检查那个方向。

答案 2 :(得分:0)

尝试从代码中删除“autoLoad:true”。它解决了我的问题与你的问题相同。