PDA

View Full Version : JSONP Store Data not showing up in Panel



rockinthesixstring
14 Jun 2011, 12:37 PM
This is a different question, yet a continuation of my other question (http://www.sencha.com/forum/showthread.php?136914-Proper-way-to-consume-external-JSONP-data-from-a-Panel).

I've got my app wired up as I believe it should be, and when I load it into Chrome, the Javascript console doesn't throw any errors. The WebService is finally returning the appropriate data, yet for some reason I can't for the life of me figure out why the panel is blank.

Here's the APP URL
http://rpcm.infinitas.ws/

Here's the WebService URL
http://rpc.infinitas.ws/Vimeo/Read?_dc=1308083451839&limit=25&callback=stcCallback1001

And here is some relevant code.

CONTROLLER


rpc.controllers.VimeoController = new Ext.Panel(
rpc.views.Vimeo.index
);

VIEW


rpc.views.Vimeo.index = {
id: 'VideoView',
title: 'Videos',
tpl: rpc.templates.VimeoTemplate,
iconCls: 'tv',
dockedItems: [{ xtype: 'toolbar', title: 'Videos'}],
store: 'rpc.stores.VimeoStore'
};

STORE


rpc.stores.VimeoStore = new Ext.data.Store({
id: 'VimeoStore',
model: 'rpc.models.VimeoModel',
proxy: {
type: 'scripttag',
url: WebService('Vimeo', 'Read'),
method: 'GET',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});

MODEL


rpc.models.VimeoModel = Ext.regModel('rpc.models.VimeoModel', {
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'}
]
});

TEMPLATE


rpc.templates.VimeoTemplate = new Ext.XTemplate([
'<tpl for=".">',
'<div>',
'{title}',
'</div>',
'</tpl>'
]);

JSON RESPONSE


stcCallback1001({"results":[{"id":25036464,"title":"Power of A Surrendered Life: The Farewell Sermon"},{"id":25036610,"title":"Child Dedication June 2011"},{"id":24734142,"title":"Power of A Surrendered Life: Connection"},{"id":24884833,"title":"Finance Update June 2011"},{"id":24587711,"title":"Papua, Indonesia Sharing May 2011"},{"id":24232427,"title":"ICHTHUS: Coming King"},{"id":23868560,"title":"ICHTHUS: Healer"},{"id":23486615,"title":"ICHTHUS: Sanctifier"},{"id":23211649,"title":"ICHTHUS: Saviour"},{"id":23867961,"title":"Elder Announcement re: Brent Trask"},{"id":22998163,"title":"Triumph of Grace: Risen Lord"},{"id":23687914,"title":"Triumph of Grace: Reigning King"},{"id":23692076,"title":"KINGDOM now: For Thine Is The Kingdom"},{"id":23694183,"title":"KINGDOM now: Deliver Us From Evil"}],"success":true});

Any help or direction will be greatly appreciated.

bclinton
14 Jun 2011, 7:44 PM
I'm not saying this is the solution you are looking for, but why don't you try displaying the results in a list rather than a panel as a sort of sanity check.

edit: wait, is rpc.views.Vimeo.index supposed to be a panel or a list? You don't specify an xtype. It has dockedItems like a panel but you give it a store like a list.

When you use an XTemplate in a panel, I think you need to explicity overwrite it with data. It doesn't just automatically use the data from a store like a list or dataview.

rockinthesixstring
15 Jun 2011, 11:22 AM
So I've started displaying it as a list, and I can get it to work but not quite as I'd like.

This bit works (note: this Ext.List is nested in an Ext.TabPanel)


rpc.controllers.VimeoController = new Ext.List({
id: 'rpc-views-vimeo-index',
itemTpl: '<tpl for="."><div class="rpc-controllers-VimeoController_VimeoItem"><strong>{title}</strong></div></tpl>',
itemSelector: 'div.rpc-controllers-VimeoController_VimeoItem',
singleSelect: true,
grouped: false,
indexBar: true,
store: rpc.stores.VimeoStore
});

HOWEVER

When I change the code so that I have a 'card' Ext.Panel as my controller, and then an Ext.List as one of the views, everything breaks. (again note: the Ext.Panel is nested in an Ext.TabPanel, and the Ext.List is nested in the Ext.Panel)

Controller

rpc.controllers.VimeoController = new Ext.Panel({
id: 'rpc-controllers-VimeoController',
iconCls: 'tv',
title: 'Video',
layout: 'card',
items: [rpc.views.vimeo.index]
});

View

rpc.views.vimeo.index = new Ext.List({
id: 'rpc-views-vimeo-index',
itemTpl: '<tpl for="."><div class="rpc-controllers-VimeoController_VimeoItem"><strong>{title}</strong></div></tpl>',
itemSelector: 'div.rpc-controllers-VimeoController_VimeoItem',
singleSelect: true,
grouped: false,
indexBar: true,
store: rpc.stores.VimeoStore
});

I'm getting a few errors with this

Cannot set property 'index' of undefined
Cannot set property 'index' of undefined
Trying to add a null item as a child of Container with itemId/id: rpc-rootPanel

rockinthesixstring
15 Jun 2011, 12:30 PM
Forget it. It was a CaSe sensitivity thing.

All is working now!!!

Thanks for all your help.

digeridoo
27 Jan 2012, 7:59 AM
Hmmm when I visit your video page it doesn't seem to work for me. Did you get it working?

I'm looking at adding vimeo vids next and have also been looking at the Sencha Touch Just One More app on Web Designer magazine...lots of reading to do about Vimeo signatures! Don't quite understand it all yet...

:-)