PDA

View Full Version : Loading another page from NestedList



AndyNock
17 Feb 2011, 3:09 PM
Hi all,

I'm slowwwwly getting a webapp working, but having 1 major problem that I can not find an answer to.

I have a nestedList - when I get to the final item, I would like to call a handler that swaps the panel. See my example at: http://test.miaduk.com/mobile/TLE/

I would like it to change to the carousel (similar to clicking sample but selecting it from nestedList).

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'
}]
});

}
});



Thank you!