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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi