View Full Version : Error when a Leaf is touched in Nested List

19 Sep 2011, 1:40 AM
Hi, I've seen examples on Nested List, then took one of them and I've put it into my app.

So I have a list of sports (football, basket) if you click on football it shows a list of matches (Italy - France, Brazil - spain) and in basket there are no matches.
If I click on "Italy - France" it shows the Detailcard without problems, but if I click Basket (which contains nothing) I get an error:

Uncaught TypeError: Cannot read property 'data' of undefinedhttp://localhost:8080/navigation/app/views/BetView.js :15

it's trying to access data of a parent that doesn't exist, because there's no upper level to the list of sports...

So the question is: how can I fix the problem, and show an alert when the user chooses a sport that contains non matches?

19 Sep 2011, 5:16 PM
Hi @lucaverrascina--

Can you post the code for the relevant portion of your app?

19 Sep 2011, 11:14 PM
It's an MVC application. The viewport (a tabPanel) has many panels and the NestedList

The Model and Store

Ext.regModel('BetItem', { fields: [
{name: 'text', type: 'string'},
{name: 'info', type: 'string'},
{name: 'model', type: 'string'},
{name: 'items', type: 'auto'},
{name: 'quota', type: 'auto'},

Navigation.stores.betstore = new Ext.data.TreeStore({
model: 'BetItem',
proxy: {
type: 'ajax',
url: '/data/catalogue.json',
reader: {
type: 'tree',
root: 'items'

The Nested List

Navigation.views.BetView = Ext.extend(Ext.NestedList, {
fullscreen: true,
iconCls: 'search',
title: 'Scommetti',
displayField: 'text',
updateTitleText: true,
useTitleAsBackText: false,
useToolbar: true,
backText: 'Back',
store: Navigation.stores.betstore,
listeners: {
leafitemtap: function( list, idx, el,e,c){
if (!this.popup) {
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
styleHtmlContent: true,
html: '<p>This is a modal, centered and floating panel. hideOnMaskTap is true by default so ' +
'we can tap anywhere outside the overlay to hide it.</p>',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
scroll: 'vertical'

//il contenuto della vista che appare al click su una leaf
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
//il ocntenuto della pagina di scommessa
tpl: ["<h2>{text}</h2>","{info}"]
return detailCard;
//determina il testo che compare nel sottotitolo
getItemTextTpl: function() {
var stringa = 'aaaaaaaaaaaaaaa';
var tplConstructor = '{text}' +
'<tpl if="model === \'Raggruppamento\'">'+
'<div class="metadata">' +
' {[values.items.length]} Manifestazioni' +
'</div>' +
'</tpl>' +
'<tpl if="model === \'Manifestazione\'">'+
'<div class="metadata">' +
' {[values.items.length]} Eventi' +
'</div>' +
'</tpl>' +
'<tpl if="model === \'Evento\'">'+
'<div class="metadata">' +
' (1: 1 , X: 5, 2: 3) ' + ' valore interno: {quota}' +
'</div>' +
return tplConstructor;

initComponent: function () {

20 Sep 2011, 1:40 AM
Hi @lucaverrascina--

Thanks for posting the code.

Is the leaf you're having issues with a leaf on the root node? If so, that could be the issue. If you have a leaf node at the root, the parentRecord passed in getDetailCard() may be different than what occurs at other "levels" in the NestedList.

For example, I tried this out in one of my apps. Here's what the "parentRecord" attributes of a root-level leaf node looks like:

parentrecord: Ext.data.RecordNode.Ext.extend.constructor
attributes: Object
id: "root"

Unlike at other levels, it has no "record.data", so in your example, this would create the error you are seeing when doing this:

getDetailCard: function(item,parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data // this is where the error comes from since record.data is undefined in parent.attributes

To get around this, you could add some logic to conditionally set parentData only when it has the appropriate attributes, or skip it altogether if you're not using it.

20 Sep 2011, 5:56 AM
You're right, the problem was that with the parameter "leaf: true" in the "Basket" empty record...when clicked it tryed to get Data from a parent that, as you said, had no data.

Now I'll work on the detailcard, Thanks! :)

18 Jan 2012, 3:50 AM
Hi There,

I am stuck with detailCard view change. I want to add different component to detailCard dynamically. can you help me out in this. I have been suggested to use setDetailCard method but I am not able to work around it. If possible please share some sample code. Thanks