View Full Version : Getting data to load into Grid template

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.

"phones":["(111) 222-3333 ",
"(999) 888-7777 "]},
"phones":["(666) 555-7777 "]},
"phones":["(444) 121-0098 ",
"(555) 212-0099 "]}

Here is my javascript:


var contact_grid_store = new Ext.data.Store({
url: 'contact.json',
reader: new Ext.data.JsonReader({
root: 'rows',

var phones_template = new Ext.XTemplate(
'<tpl for=".">',

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,



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