NestedList onClick than fullscreen panel instead of list item

[Mebel]

Hello together,

when i create a NestedList with only one Item. And i want to click on it - the view slides left and show a new list.
How i can show after that animation a full screen panel instead of an list item. ?

Here is my Sample where i want to show a google maps cards after click / animated (slide left) .
Also a tabbar ist implemented here.



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

var position = new google.maps.LatLng(37.44885,-122.158592);

var mapdemo = new Ext.Map({
center: position
});


var nestedList = new Ext.NestedList({
title: 'Primär',
iconCls: 'favorites',
fullscreen: false,
items: [{
text: 'Maps',
items: [mapdemo]
}]
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [nestedList]
});
}
});

[Mebel]

hello again,

my last intention is to set the fullscreen property.



var mapdemo = new Ext.Map({
fullscreen: true,
center: position
});This works well but after click on back and click again on map. A exception is thrown.

Uncaught TypeError: Cannot read property 'parentNode' of undefined

Any ideas?

regards

[sambowler]

Could you post the code that you used to get this working?

Thanks.

[Mebel]

sadly its more a workaround than a solution.
I have create a card layout panel. Where i inserted the nestedList.
After clicking on a item. I add temporarily a new entry into the card layout panel and slide to this entry.
In the the panel (here maps panel) i have add a buttongroup to show a back button.
After onClick on the back button i remove the panel from the card layout and switch back to the nested list.

Has anybody an better idea to solve this issue?

Does anybody know how i can slide in backwards direction when i click on the back button ?

cardpanel.getLayout().prev('slide', false); // here is no parameter to change the direction.



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



var nestedList = new Ext.NestedList({
title: 'Primär',
iconCls: 'favorites',
fullscreen: true,
items: [{
text: 'Maps',
}]
});

nestedList.on('listchange', function(list, item) {
if (!item.items && item.text) {
if (item.text="Maps")
{
// adds entry to to carPanel..
cardpanel.items.add(createMapsPanel(cardpanel));
}
// And slide to it.
cardpanel.getLayout().next('slide', true);
}
});

var cardpanel = new Ext.Panel({
iconCls: 'favorites',
layout: 'card',
items: [
nestedList
]
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [cardpanel]
});
}
});


function createMapsPanel(cardpanel)
{
var position = new google.maps.LatLng(37.44885,-122.158592);

var map = new Ext.Map({
fullscreen: false,
center: position
});

var pp = new Ext.Panel({
fullscreen: false,
items: [map]
});

var tapHandler = function(button, event) {
cardpanel.getLayout().prev('slide', false);
// dont forget to remove this entry from the card panel.
cardpanel.items.remove(pp);
};

var buttonsGroup1 = [{
text: 'Back',
ui: 'back',
handler: tapHandler
}];

var dockedItems = [{
xtype: 'toolbar',
ui: 'light',
items: buttonsGroup1,
dock: 'top'
}];


pp.addDocked(dockedItems);
return pp;
}

[meyerovb]

Until feature 120 (http://www.sencha.com/forum/showthread.php?103066-OPEN-120-Auto-direction-on-card-changes) has been implemented to auto-direction animations, you will have to pass an animation object into the transition method: cardpanel.getLayout().prev({ type: 'slide', direction: 'right' });
See the api documentation for Ext.Anim (http://www.sencha.com/deploy/touch/docs/?class=Ext.Anim) for more options you can specify.

The second parameter for the prev and next methods is wrap, which is a bool telling it to go to the first card if you call next when you are on the last card. See the api documentation for Ext.layout.CardLayout (http://www.sencha.com/deploy/touch/docs/?class=Ext.layout.CardLayout)

[Mebel]

Looks good. Thank you.