PDA

View Full Version : Changing title on nestedList



KPChow
16 Mar 2011, 3:59 AM
Hi guys,

I've got a nested list which can open a panel (using getDetailCard) when you get to the end of a leaf. However, I'm having problems trying to apply the title of the last leaf into the panel.



Ext.setup({
icon: 'images/icon.png',
glossOnIcon: false,
//tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'images/phone_startup.png',
onReady: function() {

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

var data = {
text: '60 Seconds Management',
items: [{
text: 'Core Skills',
items: [{
text: 'Fishbone Diagram',
id: 'fishbone',
leaf: true,
},{
text: '5 Whys Technique',
id: 'fiveTech',
leaf: true
},{
text: 'SMART Objectives',
id: 'smartObj',
leaf: true
},{
text: 'Circle of influence',
id: 'circle',
leaf: true
},{
text: 'Managing Stress',
id: 'managing',
leaf: true
}]
},{
text: 'Communication',
items: [{
text: 'Listening Skills',
id: 'listeningSkills',
leaf: true
},{
text: 'SPITEFUL',
id: 'spiteful',
leaf: true
},{
text: 'Giving Feedback',
id: 'gfeedback',
leaf: true
},{
text: 'Receiving Feedback',
id: 'rfeedback',
leaf: true
}]
}]
};

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

var nestedList = new Ext.NestedList({
fullscreen: true,
title: '60 Seconds Management', // <----------- Shows on the first page but also appears when you open a panel from the last leaf
useTitleAsBackText: false,
backText: 'Back',
displayField:'text',
loadingText:'Loading...',
scroll:'vertical',
store: store,
getDetailCard : function(record, parentRecord) {
return new Ext.Panel({
// target content update here
title: record.attributes.record.get('text'), // <----------- Pulling the text from the leaf to be the title
html: "<div id="+record.attributes.record.get('id')+"><img src='images/"+record.attributes.record.get('id')+"Image1.png'/><img src='images/"+record.attributes.record.get('id')+"Image2.png'/></div>",
scroll: {
direction: 'vertical',
eventTarget: 'parent'
}
});
}
});

}
});


Am I placing the title in the wrong place?

Thanks
K

dchan
16 Mar 2011, 9:19 AM
You're changing the title of the panel, not the text of the toolbar in the parent view.

So in the panel you're creating for your getDetailCard, add this listener:


listeners: {
activate: function(){
nestedList.toolbar.setTitle(record.attributes.record.get('text'));
}
}

Lemme know if that works.

KPChow
17 Mar 2011, 2:18 AM
My mistake dchan - yes, I wanted to change the title of the panel to correspond to the leaf. :">

Added the listener you wrote and it works!

I'm still quite new to Sencha Touch so thanks for your help. ;)