PDA

View Full Version : HOWTO: Templated Ajax View



claytantor
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%">',
'<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);

evant
2 Jan 2011, 3:31 PM
http://dev.sencha.com/deploy/touch/docs/?class=Ext.DataView

claytantor
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.