CODEWITHSUNDEEP
sencha-touchjsonp
hackp0int
hackp0int

Reputation: 4169

Sencha touch: JSONP parsing

Model:

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

Storage:

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

Controller:

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

View

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 Result:

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

The exception: Uncaught TypeError: Cannot read property 'length' of undefined

Question: Help how can i parse via storage or any other way the JSONP issue???

Upvotes: 1

Views: 1671

Answers (3)

Ye Myat Min
Ye Myat Min

Reputation: 1429

Try removing "autoLoad: true" from your code. It resolved my issues on the same matter as yours.

Upvotes: 0

ilija139
ilija139

Reputation: 2974

You have set this in your reader

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

And I can't see categories element in your json data. Check if this is correct or add this to your json in order to be working probably

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

Upvotes: 1

marxus
marxus

Reputation: 462

when I tried to define

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

and then invoking the jsonp response (by ctrl+c/ctrl+v into the console), I was successful, meaning the the data is a valid json string.
but when I inspected your code, I haven't seen a mechanisem that defines that function (GetCategories).

I must say that i'm unfamilier with sencha. but I aswsome that problem is that no callback function was ever created.

I see that you define a 'callbackKey: 'callback''
is there somewhere in sencha documentation that allows you to define a 'callbackValue: 'GetCategories'' or such? try and check into that direction.

Upvotes: 0

Related Questions