PDA

View Full Version : Nested List can't load Panel



KPChow
27 Oct 2011, 4:37 AM
Hi guys,

I've built a nested list where at the first level, it can't open a panel but if you dive into the next level, it works.

I probably didn't explain myself clearly so let me show you what I got at the moment.

The dataList and regModel:


Ext.regModel('ListItem', {
fields: [
{name: 'id', type: 'string'},
{name: 'title', type: 'string'},
{name: 'model', type: 'auto'},
{name: 'text', type: 'string'}
]
});


var dataList = {
title: 'Menu',
items: [{
title: "Introduction and map",
model: 'mainMenu',
id: "introductionMap",
leaf: true,
text: "<p>Intro content</p>"
},{
title: "Facts and figures",
model: 'mainMenu',
id: "factsFigures",
leaf: true,
text: "<p>Facts and figures content</p>"
},{
title: "Vital values",
model: 'mainMenu',
id: "factsFigures",
items: [{
title: "Introduction",
model: 'subMenu',
id: "vitalValuesIntro",
leaf: true,
text: "<p>Vital values Introduction content</p>"
},{
title: "Harmony and non-violence",
model: 'subMenu',
id: "vitalValuesHarmony",
leaf: true,
text: "<p></p>"
},{
title: "Face hierarchy and power distance",
model: 'subMenu',
id: "vitalValuesFace",
leaf: true,
text: "<p>Face hierarchy and power distance content</p>"
},{
title: "Guanxi",
model: 'subMenu',
id: "vitalValuesGuanxi",
leaf: true,
text: "<p>Guanxi content</p>"
},{
title: "Reciprocity",
model: 'subMenu',
id: "vitalValuesRecip",
leaf: true,
text: "<p>Reciprocity content</p>"
},{
title: "Long-term orientation",
model: 'subMenu',
id: "vitalValuesLong",
leaf: true,
text: "<p>Long-term orientation content</p>"
}]
},{
title: "Social behaviour",
model: 'mainMenu',
id: "socialBehaviour",
leaf: true,
text: "<p>Social behaviour content</p>"
},{
title: "Useful phrases",
model: 'mainMenu',
id: "usefulPhrases",
leaf: true,
text: "<p>Useful phrases content</p>"
},{
title: "Survival tips",
model: 'mainMenu',
id: "survivalTips",
leaf: true,
text: "<p>Survival tips content</p>"
},{
title: "References",
model: 'mainMenu',
id: "references",
leaf: true,
text: "<p>References content</p>"
}]
};


The data.TreeStore and nestedList


var store = new Ext.data.TreeStore({
model: 'ListItem',
root: dataList,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});


var menuNestedList = new Ext.NestedList({
title: 'Menu',
displayField: 'title',
iconCls: 'menu',
fullscreen: true,
scroll:'vertical',
store: store,
getDetailCard : function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
tpl: ["<h1>{title}</h1>{text}"]
});
detailCard.update(itemData);
this.backButton.setText(parentData.title);
return detailCard;
},


getItemTextTpl: function(){
var tplConstructor = '<tpl if="model === \'mainMenu\'">'+
'<img style="vertical-align: -9px; margin-right: 10px;" src="images/{id}.png"/><span>{title}</span>' +
'</tpl>'+
'<tpl if="model === \'subMenu\'">'+
'{title}' +
'</tpl>' ;
return tplConstructor;
}
});


So if you click anything but 'Vital Values', nothing happens when it should go and open the panel of the list selected.

From inspecting the console, it states the following: "Uncaught TypeError: Cannot read property 'data' of undefined".

I would be grateful if anyone can explain to me what it means by this and how I could resolve this. :)

Thanks
K