HTML Code:
var data={
text:'카페',
items:[
{
text:'처음', leaf:true
},{
text:'음료',
items:[{
text:'물',
items:[{
text:'탄산수',
leaf:true
},{
text:'생수',
leaf:true
}]
},{
text:'아메리카노',
leaf:true
},{
text:'에스프레소',
leaf:true
},{
text:'카푸치노',
leaf:true
}]
},{
text:'케이크',
items:[{
text:'치즈 케이크',
leaf:true
},{
text:'블루베리 케이크',
leaf:true
}]
},{
text:'photo',
//leaf:true
items:[]
}
]
};
Ext.regModel('ListItem',{
fields:[
{name:'text',type:'string'},
]
});
var store=new Ext.data.TreeStore({
model:'ListItem',
root:data,
proxy:{
type:'ajax',
reader:{
type:'tree',
root:'items'
}
}
});
Ext.setup({
tabletStartupScreen: 'tstart.png',
phoneStartupScreen: 'pstart.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var listPanel;
listPanel= new Ext.NestedList({
fullscreen:true,
title:'List',
displayField : 'text',
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,
// items: [{xtype:"button",text:"ddd"}],
tpl : ["{text}", "<br>", "{text}"]
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
},
listeners: {
itemtap:function(list, index, item, e){
var currentRecord = list.getStore().getAt(index);
currentRecord.text = currentRecord.get('text');
if(currentRecord.text=="photo") {
Ext.Msg.alert("알람","photo", Ext.emptyFn);
}
}
},
getItemTextTpl: function(){
var tplConstructor = '{text}'+
'<tpl if="text === \'처음\'">'+
'<div class="metadata">'+
'<b>사진 넣기</b>'+
'</div>'+'</tpl>'+
'<tpl if="text === \'물\'">'+
'<div class="metadata">'+
'마시는 것'+
'</div>'+'</tpl>'+
'<tpl if="text === \'카푸치노\'">'+
'<div class="metadata">'+
'빵종류'+
'</div>'+'</tpl>';
return tplConstructor;
}
});
}
});