PDA

View Full Version : Template Stopped Data Load



borden0108
19 Oct 2011, 2:00 AM
Hi all,

I have been trying to get a nested list to work for a timetable.the basic idea is the user clicks on the day and then the period.

up until now it has been working then i changed the the template to look for the value of model and have a day or period template decided on this information. the period now does not show a list rather than a load of borders. I had this problem on my first list and then i coppied the template to be the same and it works but now this list does not.
28742


Viewport.js

NestedListDemo.views.Viewport = Ext.extend(Ext.NestedList, { fullscreen: true,
title: 'Timetable',
store: NestedListDemo.music_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: ["<h2>Period {title}: {class}</h2><p>Teacher:{teacher}</br>Location:{room}<p>"]
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
},
getItemTextTpl: function() {
var tplConstructor = '<tpl if="model === \'day\'">'+
'Day {title}'
'</tpl>'+
'<tpl if="model === \'period\'">'+
'Period {class}'
'</tpl>' ;
return tplConstructor;
}

});




listitem.js

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

json file



{
"items": [
{
"title": "1",
"model": "day",
"items": [
{
"title": "1",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "2",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "3",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "4",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "5",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "6",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
}
]
},
{
"title": "2",
"model": "day",
"items": [
{
"title": "1",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "2",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "3",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "4",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "5",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "6",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
}
]
},
{
"title": "3",
"model": "day",
"items": [
{
"title": "1",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "2",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "3",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "4",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "5",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "6",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
}
]
},
{
"title": "4",
"model": "day",
"items": [
{
"title": "1",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "2",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "3",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "4",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "5",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "6",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
}
]
},
{
"title": "5",
"model": "day",
"items": [
{
"title": "1",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "2",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "3",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "4",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "5",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "6",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
}
]
},
{
"title": "6",
"model": "day",
"items": [
{
"title": "1",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "2",
"teacher": "SBG",
"room": "S22",
"class": "English",
"model": "period",
"leaf": true
},
{
"title": "3",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "4",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "5",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
},
{
"title": "6",
"teacher": "SBG",
"room": "S22",
"class": "english",
"model": "period",
"leaf": true
}
]
}
]
}


thanks matt

AndreaCammarata
19 Oct 2011, 7:17 AM
Hi matt.
Try to remove what is red and add what is blue.



var tplConstructor = '<tpl if="model === \'day\'">'+
'Day {title}' +
'</tpl>'+
'<tpl if="model === \'period\'">'+
'Period {class}' +
'</tpl>' ;


PS: You can even set your "model" field as "string" instead of "auto".

Hope this helps.