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 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 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

[Mebel]

Looks good. Thank you.