Sencha Howto: Templated Ajax View

I am making this available as a HOWTO because I could not find an example that brings all of this together, but I think its something that many developers probably want to do. This is a single view with its own template driven from an Ajax request. A specific id is passed to the view to drive the request. Hope this helps.

ratecred.views.RatingView = Ext.extend(Ext.Panel, { 
    fullscreen: true, 
    dockedItems: { 
           xtype: 'publicToolbar', 
        },     
    layout: { 
        type: 'fit' 
    },     
        initComponent: function() { 
         
        var ratingId = this.ratingId; 
         
        var mainPanel =  new Ext.Panel({ 
            html: 'Rating View'         
        }); 
         
        Ext.apply(this, { 
            items:[ mainPanel ]                         
        }); 
        ratecred.views.RatingView.superclass.initComponent.apply(this, arguments); 
         
        var ratingTemplate = new Ext.XTemplate( 
                '<div class="margin-10 rating">',   
                    '<table width="100%">', 
                    '<tr>', 
                        '<td width="48" valign="top"><img src="{owner.raterImage.filename}" width="48" height="48" class="img-align-left"/></td>', 
                        '<td valign="top"><div class="place-name">{place.name}</div></td>', 
                        '<td width="48" valign="top"><div class="value text-16">{raterRating}</div></td>', 
                    '</tr>', 
                    '<tr>', 
                        '<td colspan="3"><div class="notes">{notes}</div></td>', 
                    '</tr>',     
                    '<tpl for="attributes">', 
                    '<tr>', 
                        '<td colspan="3"><div class="attribute">{type}, {name}</div></td>', 
                    '</tr>', 
                    '</tpl>', 
                    '<tpl for="compliments">', 
                    '<tr>', 
                        '<td colspan="3"><div class="compliment"><img src="{owner:this.getProfileImageUrl}" width="48" height="48" class="img-align-left"/> owner:{owner.userName} {note}</div></td>', 
                    '</tr>',                     
                    '</tpl>', 
                    '</table>',  

                '</div>', 

                { 
                    compiled: true, 
                            getProfileImageUrl: function(rater){ 
                        if(rater.raterImage.type=='S3REPO') 
                            return 'http://media.servicetattler.com/web/iv/'+rater.raterImage.filename; 
                        else 
                            return rater.raterImage.filename; 
                    }, 
                      
         } 
    ); 
                         
        Ext.getBody().mask('Loading...', 'x-mask-loading', false); 
         
        //rating id is set at create time 
        Ext.Ajax.request({           
            url: 'http://dev.ratecred.com/v2/rating/'+ratingId+'.json', 
            success: function(response, opts) {       
                var reader = new Ext.data.JsonReader({ 
                    model: 'Rating' 
                }); 
                var data = reader.getResponseData(response); 
                ratingTemplate.overwrite(mainPanel.body, data); 
                Ext.getBody().unmask(); 
            } 
        }); 
         
    }, 
}); 

Ext.reg('ratingView', ratecred.views.RatingView);