I want to retrieve the list of movies from the Rotten Tomatoes API, everything looks alright even chrome does not give me any error but the data is not being displayed on the app. I will paste my view, store and model as i believe that it may be of help. Thanks in anticipation of a reply
tmdbModel.js
Ext.define("cinema.model.tmdbModel", {
extend: 'Ext.data.Model',
xtype: 'top_movies_model',
config: {
fields: [
{name: 'id', mapping: 'movies.id'},
{name: 'title', mapping: 'movies.title'},
{name: 'year', mapping: 'movies.year'},
{name: 'mpaa_rating', mapping: 'movies.mpaa_rating'},
{name: 'runtime', mapping: 'movies.runtime'},
{name: 'critics_consensus', mapping: 'movies.critics_consensus'},
{name: 'release_dates', mapping: 'movies.release_dates.theater'},
{name: 'critics_rating', mapping: 'movies.ratings.critics_rating'},
{name: 'critics_score', mapping: 'movies.ratings.critics_score'},
{name: 'audience_rating', mapping: 'movies.ratings.audience_rating'},
{name: 'synopsis', mapping: 'movies.synopsis'},
{name: 'poster_thumbnail', mapping: 'movies.posters.thumbnail'},
{name: 'poster_profile', mapping: 'movies.posters.profile'},
{name: 'poster_detailed', mapping: 'movies.posters.detailed'},
{name: 'poster_original', mapping: 'movies.posters.original'},
{name: 'abridged_cast_name', mapping: 'movies.abridged_cast.name'},
{name: 'abridged_cast_id', mapping: 'movies.abridged_cast.id'},
{name: 'abridged_cast_characters', mapping: 'movies.abridged_cast.characters'},
{name: 'alternate_ids', mapping: 'movies.alternative_ids.imdb'},
{name: 'links_self', mapping: 'movies.links.self'},
{name: 'links_alternate', mapping: 'movies.links.alternate'},
{name: 'links_cast', mapping: 'movies.links.cast'},
{name: 'links_reviews', mapping: 'movies.links.reviews'},
{name: 'links_similar', mapping: 'movies.links.similar'}
]
}
});
tmdbStore.js
Ext.define("cinema.store.tmdbStore", {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.JsonP',
'cinema.model.tmdbModel',
],
xtype: 'top_movies_store',
config: {
model: 'cinema.model.tmdbModel',
store: {
proxy: {
type: 'jsonp',
url: 'api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?apikey=[myApiKey]',
headers: {
'Accept' : 'application/json'
},
reader: {
type: 'json',
root: 'movies'
},
callbackKey: 'callback',
autoLoad: true
}
}
}
});
Main.js - view
Ext.define('cinema.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: ['Ext.TitleBar', 'Ext.DataView', 'cinema.store.tmdbStore'],
config: {
layout: {
type: 'card',
animation: 'slide'
},
defaults: {
baseCls: 'back'
},
animation: 'flip',
items: [
{
xtype: 'titlebar',
title: 'Anakle Cinemas',
docked: 'top',
baseCls: 'flat title_font',
items: [
{
html: '<img src="menu_butn.png">',
cls: 'flat border-right',
padding: '5 15 0 15',
align: 'left',
style: 'height: 100%',
itemId: 'menu_btn',
listeners: {
tap: function (button, e, eOpts) {
var cont = button.getParent().getParent();
cont.setActiveItem(0);
}
}
},
{
html: '<img src="share.png">',
cls: 'flat',
padding: '5 15 0 15',
align: 'right',
style: 'height: 100%',
itemId: 'share_btn'
}
]
},
{
xtype: 'panel',
defaultType: 'button',
//padding: '20 0 0 5',
defaults: {
ui: 'plain',
labelCls: 'btn_label',
cls: 'btn_color flat'
},
items: [
{
text: 'Top Movies',
listeners: {
tap: function (button, e, eOpts) {
var cont = button.getParent().getParent();
cont.setActiveItem(1)
}
}
},
{
text: 'Trailers',
listeners: {
tap: function (button, e, eOpts) {
var cont = button.getParent().getParent();
cont.setActiveItem(2)
}
}
},
{
text: 'Now Showing',
listeners: {
tap: function (button, e, eOpts) {
var cont = button.getParent().getParent();
cont.setActiveItem(3)
}
}
}
]
},
{
xtype: 'panel',
items: [
//{
// xtype: 'titlebar',
//title: 'Top Movies'
// },
{
xtype: 'dataview',
title: 'Top Movies',
store: 'tmdbStore',
styleHTMLContent: true,
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>{title}</div>',
'</tpl>'
)
}
]
},
{
xtype: 'panel',
html: 'Trailers'
},
{
xtype: 'panel',
html: 'Now Showing'
}
]
}
});
Please note that I'm new to the framework, just 1 week to be precise.
I don't have enough reputation to post links hence "link" in some parts and I have limited the result to just 1
{
"movies":
[
{
"id": "771322400",
"title": "The Purge",
"year": 2013,
"mpaa_rating": "R",
"runtime": 85,
"critics_consensus": "Half social allegory, half home-invasion thriller, The Purge attempts to use thriller formula to make an intelligent point -- but ultimately only ends up sinking in numbing violence and tired cliches.",
"release_dates": {
"theater": "2013-06-07"
},
"ratings": {
"critics_rating": "Rotten",
"critics_score": 41,
"audience_rating": "Spilled",
"audience_score": 59
},
"synopsis": "If on one night every year, you could commit any crime without facing consequences, what would you do? In The Purge, a speculative thriller that follows one family over the course of a single night, four people will be tested to see how far they will go to protect themselves when the vicious outside world breaks into their home. In an America wracked by crime and overcrowded prisons, the government has sanctioned an annual 12-hour period in which any and all criminal activity-including murder-becomes legal. The police can't be called. Hospitals suspend help. It's one night when the citizenry regulates itself without thought of punishment. On this night plagued by violence and an epidemic of crime, one family wrestles with the decision of who they will become when a stranger comes knocking. When an intruder breaks into James Sandin's (Ethan Hawke) gated community during the yearly lockdown, he begins a sequence of events that threatens to tear a family apart. Now, it is up to James, his wife, Mary (Lena Headey), and their kids to make it through the night without turning into the monsters from whom they hide. Directed by James DeMonaco (writer of Assault on Precinct 13 and The Negotiator), The Purge is produced by Jason Blum of Blumhouse (Paranormal Activity, Insidious, Sinister), Platinum Dunes' partners Michael Bay, Brad Fuller and Andrew Form (The Amityville Horror, The Texas Chainsaw Massacre), as well as Sebastien Kurt Lemercier (Assault on Precinct 13).(c) Universal",
"posters": {
"thumbnail": "link",
"profile": "link",
"detailed": "link",
"original": "link"
},
"abridged_cast": [
{
"name": "Ethan Hawke",
"id": "162660464",
"characters": [
"James Sandin"
]
},
{
"name": "Lena Headey",
"id": "162653508",
"characters": [
"Mary Sandin"
]
},
{
"name": "Max Burkholder",
"id": "770752375",
"characters": [
"Charlie Sandin"
]
},
{
"name": "Adelaide Kane",
"id": "771075391",
"characters": [
"Zoey Sandin"
]
},
{
"name": "Edwin Hodge",
"id": "770673719",
"characters": [
"Bloody Stranger"
]
}
],
"alternate_ids": {
"imdb": "2184339"
},
"links": {
"self": "link",
"alternate": "link",
"cast": "link",
"clips": "link",
"reviews": "link",
"similar": "link"
}
}
]
}To begin with, you should remove movies from the mapping (in the model definition), which will allow you to remove the mapping completely from all fields that don't have further nesting, eg:
fields: [
{name: 'id'},
{name: 'title'},
...
In the view, I see you only use the 'title' field, so if you only need the title, you don't need to define all the model, you may just define the title, and the rest of the fields will be ignored. If you actually need all the fields, you will want to do something more sophisticated with fields that are an array, such as the 'abridged_cast'.