PDA

View Full Version : Ext.apply.clone : Uncaught RangeError: Maximum call stack size exceeded



timbaktoo
20 Oct 2012, 1:22 PM
Hi,

I am geting uncaught range error when I use data:record.data in the controller while pushing a new view on navigation view. If I remove data:record.data from the controller, the error is gone, the page loads. But In what other way should I display data on the details view?


I am trying to load rotten tomatoes movies data in a list view, and when you click on the movie name, the next screen will show the movie details.

Following is my code:

app.js



Ext.application({
controllers: ["Main"],


name: 'RottenTomatoes',


requires: [
'Ext.MessageBox'
],


views: ['Main','ListMovies','MovieDetails'],
stores: ['Movies'],
models: ['Movie','Posters'],


icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},


isIconPrecomposed: true,


startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();


// Initialize the main view
Ext.Viewport.add(Ext.create('RottenTomatoes.view.Main'));
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});


Views:

Main.js


Ext.define("RottenTomatoes.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar', 'RottenTomatoes.view.ListMovies'],
config: {
tabBarPosition: 'bottom',


items: [
{
xtype:'listmoviespage'
}
]
}
});



ListMovies.js


Ext.define('RottenTomatoes.view.ListMovies', {
extend:'Ext.navigation.View',
xtype: 'listmoviespage',
requires: ['Ext.dataview.List'],
config: {
title: 'Movies',
iconCls:'star',
items:{
title:'Upcoming Movies',
xtype:'list',
scrollable:true,
styleHtmlContent:true,
cls: 'x-list-movies',
store: 'Movies',
itemTpl:
[
'<div class="thumbnailclass">',
'<tpl for="posters">',
'<img src="{thumbnail}"/>',
'</tpl>',
'<div class="clear-fix"></div></div>','<div class="titleclass"><h1>{title}</h1><span>MPAA Rating: <b>{mpaa_rating}</b>, Year: <b>{year}</b></span></div><div class="clear-fix"></div>'
]
}
}
});




MovieDetails.js


Ext.define('RottenTomatoes.view.MovieDetails',{
extend:'Ext.Panel',
xtype:'moviedetailpage',
config: {
title: 'moviedetail',
items:{
scrollable:true,
styleHtmlContent:true,
cls: 'x-list-movies',
store: 'Movies',
itemTpl:
[
'<div class="thumbnailclass">',
'<tpl for="posters">',
'<img src="{thumbnail}"/>',
'</tpl>',
'<div class="clear-fix"></div></div>','<div class="titleclass"><h1>{title}</h1><span>MPAA Rating: <b>{mpaa_rating}</b>, Year: <b>{year}</b></span></div><div class="clear-fix"></div>'
]
}
}
});


Model:

Movie.js


Ext.define('RottenTomatoes.model.Movie', {
extend: 'Ext.data.Model',


requires: ['RottenTomatoes.model.Posters'],


config: {
fields: [
'title',
'year',
'mpaa_rating',
'synopsis'
],


proxy: {
type: 'jsonp',
url: 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/upcoming.json?limit=25&country=us&apikey=r9pgcgqkugqdrpbynwqvxhez',
reader : {
type : 'json',
rootProperty : 'movies'
}
},


hasMany: {
model: "RottenTomatoes.model.Posters",
associationKey: 'posters'
}
}
});




Poster.js


Ext.define('RottenTomatoes.model.Posters', {
extend: 'Ext.data.Model',
config: {
fields: [
'thumbnail','profile'
],


belongsTo: "RottenTomatoes.model.Movie"
}
});


Store:

Movies.js


Ext.define('RottenTomatoes.store.Movies', {
extend: 'Ext.data.Store',


config: {
model: 'RottenTomatoes.model.Movie',
autoLoad: true
}
});


Controller:

Main.js


Ext.define('RottenTomatoes.controller.Main', {
extend: 'Ext.app.Controller',

config: {
refs: {
movies:'listmoviespage'
},
control: {
'listmoviespage list':{
itemtap:'showMovieDetail'
}
}
},
showMovieDetail:function(list, index, element, record)
{
//console.log(record.get('title'));
this.getMovies().push({


xtype:'moviedetailpage',
title:record.get('title'),
data:record.data


});

}
});

mitchellsimoens
22 Oct 2012, 5:16 AM
Just from your code it doesn't look like you are even using the data config in your movie detail page.

Also, you should watch for overnesting. A list does not have to be within a panel.

lisasy
17 Jan 2013, 11:55 AM
I want to bump this thread because I am running into a similar problem. Instead of working with RottenTomato's API, I'm working with Tumblr's. I am wondering if the deeply nested JSON structure of the Tumblr file is somehow disabling me from getting the correct record or is resulting in the recursion.

timbaktoo
17 Jan 2013, 1:03 PM
Can you post your code. I can try to help. I solved my above issue somehow, but I didn't work on it any further after that.

lisasy
18 Jan 2013, 7:22 AM
Thanks! So I have three files: 3 Views, 1 store, 1 model, and 1 controller file.
I essentially am showing a gallery of images form a Tumblr website; I am able to show all of the thumbnails in one view (NavView), but I'm struggling with pushing the images onto the FullView. What I want to accomplish is, by clicking on one of the thumbnails on NavView view, that particular thumbnail will push onto the next full, FullView, to show a full-size image of the particular image tapped on.

VIEWS:

view/Main.js


Ext.define("tumblrPhotos.view.Main", {
extend: 'Ext.Panel',
xtype: 'mainpanel',
requires: [
'tumblrPhotos.view.NavView'
],
config: {
layout: {
type: 'card',
},
items:[{
xtype: 'navview',
}]
}
});


view/NavView.js

Ext.define("tumblrPhotos.view.NavView", { extend: 'Ext.navigation.View',
xtype:'navview',
requires: [
'Ext.dataview.List',
'Ext.data.Store',
'tumblrPhotos.store.PhotoStore'
],


config: {
layout: 'card',
items: [{
id: 'navpanel',
xtype: 'list',
store: 'PhotoStore',
title: 'NAV',
baseCls: 'gallery-image',
itemTpl: new Ext.XTemplate ([
'<div class="gallery-thumbnail">',
'<tpl for="photos[0].alt_sizes[0]">',
'<img src="{url}" />',
'</tpl>',
'</div>'
].join('')
),


}]


},
});




view/FullView.js


Ext.define("tumblrPhotos.view.FullView", {
extend: 'Ext.Panel',
xtype:'fullview',
config: {
fullscreen: true,
html: '<p>HTML</p>',
tpl: [
'{url}'
]
}
});




MODEL

model/PostsModel.js

Ext.define("tumblrPhotos.model.PostsModel", { extend: 'Ext.data.Model',
config: {
fields:[ //all the fields of posts BESIDES hasMany (photos)
{name:'blog_name'},
{name:'id'},
{name:'post_url'},
{name:'type'},
{name:'date'},
{name:'timestamp'},
{name:'caption'}
],


hasMany: {
model: 'PhotoModel',
name: 'photos',
associationKey: 'photos'
}

}
});


Ext.define("PhotoModel", {
extend: 'Ext.data.Model',
config: {


fields:[ //all the fields of photos BESIDES hasMany(alt_sizes)
{name:'caption'},
{name:'alt_sizes'}
],


hasMany: {
model: 'AltSizesModel',
name: 'alt_sizes',
associationKey: 'alt_sizes'
},


belongsTo: [{
model:'tumblrPhotos.model.PostsModel',
name: 'photos'
}]


}
});


Ext.define("AltSizesModel", {
extend: 'Ext.data.Model',
config: {
fields:[
{name:'width'},
{name:'height'},
{name:'url'}
],
belongsTo: [{
model: 'PhotoModel',
name: 'alt_sizes'
}]
}
});






STORE

store/PhotoStore.js

Ext.define("tumblrPhotos.store.PhotoStore", { extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.JsonP',
//'tumblrPhotos.model.PostsModel',
],
config: {
model: 'tumblrPhotos.model.PostsModel',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://api.tumblr.com/v2/blog/lisacanblog.tumblr.com/posts/photo?api_key=HssV7DgyS8RtT0uYE5qpSQJwSxs6nIWpx06mMt8kNprCGQqIo8&callback=Ext.util.JSONP.callback',
reader: {
callbackKey: 'callback',
type: 'json',
rootProperty: 'response.posts'
}
},
useComponents: true,
defaultType: 'mylistitem'
}
});






Controller

controller/GalleryController.js



Ext.define('tumblrPhotos.controller.GalleryController',{
extend: 'Ext.app.Controller',
requires: ["Ext.dataview.List"],


config: {
refs: {
gallery: 'navview',
},
control: {
'#navpanel': {
itemtap: 'viewFullScreen',
}
}
},


viewFullScreen: function(list, index, element, record){
console.log(index),
this.getGallery().push({
xtype: 'fullview',
data: record.data
})
}




});



Thanks for your help! I appreciate it!