Showing a carousel from a nestedList - possibly using handler? - sencha-touch

Question

I have a nestedList - when I get to the final item, I would like to call a handler that swaps the panel to a carousel. Please see - http://test.miaduk.com/mobile/TLE/
Unfortunately I can't seem to get any handlers to work on the nested Items and can not think of another way. I'm still very much a beginner in Sencha, so any help would be appreciated.
Thank you!
See code:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {
/*Data Store
*********************************************************************************/
var data = {
text: 'Categories',
items: [{
text: 'Core Skills/Personal Development',
items: [{
text: 'Fishbone Diagram',
leaf: true
},{
text: '5 Whys Technique',
leaf: true
},{
text: 'SMART Objectives',
leaf: true
},{
text: 'Circle of Influence',
leaf: true
},{
text: 'Managing Stress',
leaf: true
}]
},{
text: 'Communication',
items: [{
text: 'Listening Skills',
leaf: true
},{
text: 'Giving Feedback',
leaf: true
},{
text: 'Recieving Feedback',
leaf: true
}]
},{
text: 'Customer Service',
items: [{
text: 'Listening and Confirming',
leaf: true
}]
}]
};
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'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Categories',
displayField: 'text',
dock: 'top',
store: store
});
/*Carousel
*********************************************************************************/
var carousel = new Ext.Carousel({
fullscreen: true,
displayField: 'text',
dock: 'top',
defaults: {
cls: 'card'
},
items: [{
html: '<img src="drainImage1.png">'
},
{
title: 'Tab 2',
html: '<img src="drainImage2.png">'
}]
});
/*Tab Panel
*********************************************************************************/
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'My Courses',
html: '<h1>Course list to appear here</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '3',
dockedItems: nestedList
},{
title: 'Sample',
cls: 'card2',
iconCls: 'user',
dockedItems: carousel
},{
title: 'Help',
html: '<h1>Help</h1><p>Info on how to add to your home screen goes here</p>',
cls: 'card3',
iconCls: 'user'
}]
});

Answer 1

Check this sample from Sencha NestedList
http://dev.sencha.com/deploy/touch/examples/nestedlist/index.js
There is a "leafitemtap" event that you can hook to your nested list to execute a callback:
nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
var ds = subList.getStore(),
r = ds.getAt(subIdx);
Ext.Ajax.request({
url: '../../src/' + r.get('id'),
success: function(response) {
detailCard.setValue(response.responseText);
},
failure: function() {
detailCard.setValue("Loading failed.");
}
});
});