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

Code:

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

Code:

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


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

ListMovies.js

Code:

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

Code:

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

Code:

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

Code:

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


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

Store:

Movies.js

Code:

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


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

Controller:

Main.js

Code:

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

Code:

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

view/NavView.js

Code:

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

Code:

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

MODEL

model/PostsModel.js

Code:

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

Code:

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

Code:

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!

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

Thread Tools

Search Thread

Display

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

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

Bump

Bump

Tags for this Thread