Sunday, January 09, 2011

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%">',
'<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">{}</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 ''+rater.raterImage.filename;
return rater.raterImage.filename;


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

//rating id is set at create time
url: ''+ratingId+'.json',
success: function(response, opts) {
var reader = new{
model: 'Rating'
var data = reader.getResponseData(response);
ratingTemplate.overwrite(mainPanel.body, data);


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

No comments: