PDA

View Full Version : Backbutton and Title in NestedList



ControlB
13 Feb 2011, 5:34 AM
Hy!

Can someone tell me, how to change the backbutton-Text and the title-text in a NestedList!?

I have a on('leafitemtap'' .... event that loads a detailpage into the detailCard.

As long as i navigate through the NestedList, Backbutton and Title are updated automatically by the basic function of the NestedList.
Now when i tap a leafItem, the panel with the detailpage displays correct, but the Backbutton don't change and the title falls back to the default title "Lebensmittel".

How can i set the both texts!?

Here my Code:



var data = {
id : 1,
text: 'Lebensmittel',
items: [{
id : 2,
text: 'Drinks',
items: [{
id : 3,
text: 'Water',
items: [{
id : 4,
text: 'Sparkling',
leaf: true
},{
id : 5,
text: 'Still',
leaf: true
}]
},{
id : 6,
text: 'Coffee',
leaf: true
},{
id : 7,
text: 'Espresso',
leaf: true
},{
id : 8,
text: 'Redbull',
leaf: true
},{
id : 9,
text: 'Coke',
leaf: true
},{
id : 10,
text: 'Diet Coke',
leaf: true
}]
},{
id : 11,
text: 'Fruit',
items: [{
id : 12,
text: 'Bananas',
leaf: true
},{
id : 13,
text: 'Lemon',
leaf: true
}]
},{
id : 14,
text: 'Snacks',
items: [{
id : 15,
text: 'Nuts',
leaf: true
},{
id : 16,
text: 'Pretzels',
leaf: true
},{
id : 17,
text: 'Wasabi Peas',
leaf: true
}]
},{
id : 18,
text: 'Empty Category',
//leaf: true,
items: []
}]
};

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

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

cbDemo.nestedList = new Ext.NestedList({
fullscreen: true,
displayField: 'text',
title: 'Lebensmittel',
useTitleAsBackText: true,
getDetailCard: function(record, parentRecord) {
return new Ext.Panel({
value: 'Loading...',
scroll: {
eventTarget: 'parent'
}
});
},
store: store
});

cbDemo.nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
var ds = subList.getStore(),
r = ds.getAt(subIdx);

Ext.Ajax.request({
url: 'nestedListDetailPage.cfm?id=' + r.get('id'),
success: function(response) {

//Ext.Msg.alert('Antwort', response.responseText, Ext.emptyFn);
detailCard.update(response.responseText);
},
failure: function() {
detailCard.update("Loading failed.");
}
});
});




I hope my question is not too bad...
I'm absolutely new in sencha touch, but love it! :-)

Oops, posted the question two times!? sorry... how can i delete one!? :-/

Sahel
9 May 2011, 5:45 AM
Hello,

I am a French student, sorry for my English.

You can try this :

(In my case I use an other toolbar)

First add two var in your nestedList, like this


nestedList = new Ext.NestedList({
fullscreen: true,
displayField: 'text',
toolbar: myToolBar,
oldTitle:' ',
newTitle:' ',
...


Next, in the before card switch function I save the toolbar title to display it on the back button later:



nestedList.oldTitle = myToolBar.title;


then, in the item tap function I save the item value, and if this item is a leaf, I set toolbar title and back button text :



var onItemTap = function(subList, subIdx, item, e){

nestedList.newTitle = subList.store.getAt(subIdx).data.text;

if(subList.store.getAt(subIdx).data.leaf == true)
{

myToolBar.setTitle(nestedList.newTitle);

if(nestedList.backButton.text)
{
nestedList.backButton.setText(nestedList.oldTitle);
}

}

}


I hope help you.