View Full Version : Nested JSON Data with grouped List

9 Mar 2011, 3:59 PM
I'm seeing weird behavior with a List, nested JSON data and grouped: true. I'm sure it's something I've overlooked but as soon as I add "grouped: true" to my List, the data seems to lose anything beyond the top level (no emailAddresses and no leads arrays). If I do not group the list, all works perfectly. Here's the code:

// Model
Ext.regModel("leads.models.Contact", {
fields: [
{name: "id", type: "string"},
{name: "mostRecentCreated", type: "auto"},
{name: "firstName", type: "string"},
{name: "lastName", type: "string"},
{name: "homePhone", type: "string"}
hasMany : [
{model: "leads.models.Lead", name: "leads"},
{model: "leads.models.EmailAddress", name: "emailAddresses"}
Ext.regModel("leads.models.EmailAddress", {
fields: [
{name: "type", type: "string"},
{name: "value", type: "string"}
belongsTo: "leads.models.Contact"
Ext.regModel("leads.models.Lead", {
fields: [
{name: "id", type: "string"},
{name: "summary", type: "summary"}
belongsTo: "leads.models.Contact"

// Data
"contacts": [{
"id": "345634",
"mostRecentCreated": 1299624680048,
"firstName": "Jim",
"lastName": "Bauer",
"homePhone": "(901) 555-1212",
"emailAddresses": [{
"type": "home",
"value":"[email protected]"
"type": "work",
"value": "[email protected]"
"leads": [{
"id": "9873498734",
"summary": "General - Website"

// App / List etc...
this.contactStore = new Ext.data.Store({
model: "leads.models.Contact",
proxy: {
type: "ajax",
url : "",
reader: {
type: "json",
root: "contacts"
//sorters: "mostRecentCreated",
getGroupString : function(record) {
return (new Date(record.get("mostRecentCreated"))).format("M j, Y");

this.leadList = new leads.views.LeadList({
store: this.contactStore
this.items = [this.leadList];

leads.views.LeadList = Ext.extend(Ext.List, {
fullscreen: true,
grouped: true,
itemSelector: '.lead-list-item',
itemTpl : new Ext.XTemplate("<div class='lead-list-item' id='{id}'>\
<div class='title'>{firstName} {lastName}<div class='time'>9:27 <span style='font-weight:normal'>AM</span></div></div>\
<div class='lead-info'>{[this.getLeadInfo(values.leads)]}</div>\
<div class='contact-info'>h: <a href='tel:(970) 555-1212'>(970) 555-1212</a> &nbsp;&nbsp;&nbsp; e: <a href='mailto:[email protected]'>[email protected]</a></div>\
<div class='chevron'><tpl if=\"leads.length &gt; 1\"><div class='lead-count'>{leads.length}</div></tpl></div>\
compiled: true,
getLeadInfo: function(leads) {
return "blee";.......

In getLeadInfo(), if I pass in 'values' instead of 'values.leads' and inspect the data, it is indeed missing any data below the top level so 'leads' is undefined ONLY when grouped: true. If the list is not grouped, everything works perfectly. What did I miss?

Any help is much appreciated!

14 Mar 2011, 7:18 AM
Any suggestions? No one else has had a similar issue? Bueller?

4 Apr 2011, 7:35 PM
I'm seeing the same behavior. Has anyone found a way to get this to work?

6 Apr 2011, 5:58 AM
I was just shown this thread yesterday: http://www.sencha.com/forum/showthread.php?128503-List-not-preparing-association-data-when-List.grouped-true

I tried it this morning and seems to be working properly. Hopefully the fix will be included in an upcoming release.

6 Apr 2011, 7:05 AM
Yup, it works for me too. Thanks!