1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    timbaktoo is on a distinguished road

      0  

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

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


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


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    2
    Vote Rating
    0
    lisasy is on a distinguished road

      0  

    Default Bump

    Bump


    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.

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    timbaktoo is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    2
    Vote Rating
    0
    lisasy is on a distinguished road

      0  

    Default


    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!

Thread Participants: 2

Tags for this Thread