Results 1 to 6 of 6

Thread: NestedList onClick than fullscreen panel instead of list item

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Location
    Germany near cologne
    Posts
    21

    Question NestedList onClick than fullscreen panel instead of list item

    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.

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

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Location
    Germany near cologne
    Posts
    21

    Cool first solution, works well. on first time

    hello again,

    my last intention is to set the fullscreen property.

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

  3. #3

    Default

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

    Thanks.

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Location
    Germany near cologne
    Posts
    21

    Default one solution

    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.

    Code:
    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;
    }

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    220

    Default

    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

  6. #6
    Sencha User
    Join Date
    Jun 2010
    Location
    Germany near cologne
    Posts
    21

    Default

    Looks good. Thank you.

Similar Threads

  1. Setting list and list item styles for Html widget
    By afs in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 9 Nov 2009, 2:29 AM
  2. Newbie - Add onClick to MVC list
    By dke01 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 24 Jun 2009, 4:37 PM
  3. combobox with drop list whose item height (for each item) is 3 pixels high!
    By stratton in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 17 Feb 2009, 8:50 AM
  4. Disable onClick item changing on CycleButton
    By karantir in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Oct 2008, 12:59 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •