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