View Full Version : Manipulating JSON data values before inserting into template for DataView display

23 Dec 2010, 10:27 AM
This is a followup to an earlier question I asked (http://www.sencha.com/forum/showthread.php?119218-Best-way-to-display-JSON-data-as-HTML&p=554199) about displaying JSON data.

After getting that resolved, I tinkered around ad figured out how to calculate a persons age from thier date of birth in the JSON data. The I decided that I wanted to include thier photo, if available -- and if no photo was available, I wanted to display a generic male or female images.

I handled the age calculation in the field defintion. I'm not sure if that's the best way to accomplish this task, but I got it to work that way. Likewise, I'm not sure if the field definition is the right place for the logic to determine what image should be displayed for a person.

What has me stumped is I need to act on several data items, but only seem to be able to pass one into a function embedded in the field definition code.

How can I pass more data item values, or is there some other way to accomplish this?

Here is my code:

1. DataView

var patientDataView = new Ext.DataView({
store : jsonStore,
tpl : patient_banner_template

2. Template

var patient_banner_template = new Ext.XTemplate(
'<tpl for=".">',
'<div class="banner_data"><span class="label">ID</span><span class="data">{id}</span></div>',
'<div class="banner_data"><span class="label">Lastname</span><span class="data">{lastname}, </span></div>',
'<div class="banner_data"><span class="label">Firstname</span><span class="data">{firstname}</span></div>',
'<div class="banner_data"><span class="label">Gender</span><span class="data">{gender}</span></div>',
'<div class="banner_data"><span class="label">Age</span><span class="data">{age}</span></div>',
'<div class="banner_data"><span class="label">DoB</span><span class="data">{dob:date("d/m/y")}</span></div>',

3. JsonStore

var jsonStore = new Ext.data.JsonStore({
proxy : remoteProxy,
root : 'records',
storeId : 'ourJsonStore',
autoLoad : false,
fields : recordFields

4. Field Definition

var recordFields = [
{ name : 'id', mapping : 'id' },
{ name : 'firstname', mapping : 'firstname' },
{ name : 'lastname', mapping : 'lastname' },
{ name : 'gender', mapping : 'gender',
convert: function(gender){ // gender is only one character in db -- this renders the full word
if (gender == "f"){
return "Female";
} else {
return "Male";
{ name : 'dob', mapping : 'dob', type : 'date', dateFormat : 'Y-m-d H:i:s'},
{ name : 'age', mapping : 'dob',
convert function(dob){
var now = new Date();
var dob = Date.parseDate(dob, "Y-m-d H:i:s").format("Y-m-d");
var dob_arr = dob.split('-');
var age = (now.getFullYear()) - (parseInt(dob_arr[0]));
if(dob_arr[1] > now.getMonth()){
age = age -1;
} else if((dob_arr[1] == now.getMonth()) && (dob_arr[2] > now.getDate())){
age = age -1;
return age;

23 Dec 2010, 10:41 AM
in 4. Field definition your convert function (dob) actually takes 2 parameters. if you make it

convert function(value,record) {


then you could get the dob from value, and the entire record is in record so you could get to record.firstname, gender or whatever

is this what you are looking for?

23 Dec 2010, 2:13 PM
Fantastic -- not only dose that work, but it also gives me the flexibility to do a bunch of other things I wanted as well. Cheers!

24 Dec 2010, 1:21 AM
The 'prepareData' method of DataView is also very useful to do data preprocessing for display.