View Full Version : HOWTO: Templated Ajax View

2 Jan 2011, 2:21 PM
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%">',
'<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>',
'<td colspan="3"><div class="notes">{notes}</div></td>',
'<tpl for="attributes">',
'<td colspan="3"><div class="attribute">{type}, {name}</div></td>',
'<tpl for="compliments">',
'<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>',


compiled: true,
getProfileImageUrl: function(rater){
return 'http://media.servicetattler.com/web/iv/'+rater.raterImage.filename;
return rater.raterImage.filename;


Ext.getBody().mask('Loading...', 'x-mask-loading', false);

//rating id is set at create time
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.reg('ratingView', ratecred.views.RatingView);

2 Jan 2011, 3:31 PM

3 Jan 2011, 9:22 AM
yes, very nice and a bit more elegant agreed. I ran across the DataView and must have purged it from memory.