PDA

View Full Version : Getting data to load into Grid template



jfox
17 Feb 2011, 12:28 PM
I am trying to load contacts and phone numbers into a grid.
First Name and Last Name display fine. I cannot get the phone numbers to display.
I have my data in JSON. In some cases I have multiple phone numbers for a contact.
Here is the JSON.


{"rows":[
{"contact_id":"1",
"first_name":"Zaphod",
"last_name":"Beeblebrox",
"phones":["(111) 222-3333 ",
"(999) 888-7777 "]},
{"contact_id":"2",
"first_name":"Ford",
"last_name":"Prefect",
"phones":["(666) 555-7777 "]},
{"contact_id":"3",
"first_name":"Arthur",
"last_name":"Dent",
"phones":["(444) 121-0098 ",
"(555) 212-0099 "]}
]}


Here is my javascript:


Ext.onReady(function(){

var contact_grid_store = new Ext.data.Store({
url: 'contact.json',
reader: new Ext.data.JsonReader({
root: 'rows',
fields:['contact_id','first_name','last_name']
})
});

var phones_template = new Ext.XTemplate(
'<tpl for=".">',
'{phones}<br>',
'</tpl>'
);

var contact_grid_colModel = new Ext.grid.ColumnModel([
{header: "ID", dataIndex: 'contact_id', id: 'contact_id', sortable: false,hidden:true},
{header: "First Name", dataIndex: 'first_name', id: 'first_name', sortable: true},
{header: "Last Name", dataIndex: 'last_name', id: 'last_name', sortable: true},
{header: "Phones", dataIndex: 'phones',xtype:'templatecolumn',tpl:phones_template}

]);

var contact_grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
title : 'Contacts',
autoExpandColumn : 'first_name',
autoExpandColumn : 'last_name',
width : 300,
autoHeight : true,
store : contact_grid_store,
cm : contact_grid_colModel,
});

contact_grid_store.load();

});


I want the phone numbers to appear one above the other, that's why I inserted a
<br> after (phones) in the template.