1. #1
    Sencha User
    Join Date
    Jun 2010
    Location
    Germany near cologne
    Posts
    21
    Vote Rating
    0
    Mebel is on a distinguished road

      0  

    Question NestedList onClick than fullscreen panel instead of list item

    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
    Vote Rating
    0
    Mebel is on a distinguished road

      0  

    Cool first solution, works well. on first time

    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
    Ext User
    Join Date
    Jul 2010
    Posts
    1
    Vote Rating
    0
    sambowler is on a distinguished road

      0  

    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
    Vote Rating
    0
    Mebel is on a distinguished road

      0  

    Default one solution

    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 - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    0
    meyerovb is on a distinguished road

      0  

    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
    Vote Rating
    0
    Mebel is on a distinguished road

      0  

    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

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar