1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    399
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default Full screen panel not masking correctly?

    Full screen panel not masking correctly?


    Hi,

    I got an issue where I am trying to display a full screen panel on top of a Tab Panel. The Tab Panel has a top and bottom toolbar, but when I got to show the additional panel on top content from the Tab Panel behind is still visible on this panel.

    My code for the User Preferences view is below:

    Code:
    Ext.define('PinpointersTouch.view.PreferencesView', {
        extend: 'Ext.form.Panel',
        xtype: 'prefsview',
        config: {
            fullscreen:true,
            items: [
                {
                    xtype : 'toolbar',
                    docked: 'top',
                    title: 'User Preferences'
                },
                {
                    xtype: 'checkboxfield',
                    name : 'showunitlabels',
                    label: 'Show Unit Labels'
                },
                {
                    xtype: 'selectfield',
                    label: 'Auto Update Interval',
                    options:[
                            {text: '1 Minute',  value: 60},
                            {text: '3 Minutes', value: 120},
                            {text: '5 Minutes',  value: 300},
                            {text: '10 Minutes',  value: 600}
                        ]
                },
                {
                    xtype : 'toolbar',
                    docked: 'bottom',
                    layout : {
                        pack : 'right'
                    },
                    items: [
                        {
                            xtype : 'button',                            
                            text: 'Done',
                            itemId: 'btnDone'
                        },
                        {
                            xtype : 'button',                            
                            text: 'Cancel',
                            itemId: 'btnCancel'
                            
                        }                        
                    ]
                }
            ]
        }
    });
    I have button tap listener configured on the Select Criteria button to show the panel like so:

    Code:
    'historyview #btnSelectCriteria' : {
        tap: function() {
                            
            if(this.application.userPrefsPanel==null) {
                this.application.userPrefsPanel =  Ext.create('PinpointersTouch.view.PreferencesView',{
                });
            }
                
            this.application.userPrefsPanel.show();
        }
    
    
    }
    So here is how my main Tab Panel appears:
    BeforePanelIsShown.jpg

    This is what happens when showing the panel on top:

    AfterPanelIsShown.jpg

    See how the buttons from Tab Panel are showing through onto this new panel (circled in red).

    Where am I going wrong here please?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,798
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    When you set a component to have fullscreen to true, when you use Ext.create (or new) it will add that item as a child of Ext.Viewport but it is hidden as it's not the active item. Ext.Viewport is a global container that uses card layout. So when you use show(), you are just making the component go from hidden to shown. You should use Ext.Viewport.setActiveItem instead of show:

    Code:
    Ext.create('Ext.tab.Panel', {
        fullscreen : true,
        items      : [
            {
                title : 'Test',
                html  : 'Hi',
                items : [
                    {
                        xtype  : 'toolbar',
                        docked : 'bottom',
                        title  : 'Tab Panel',
                        items  : [
                            {
                                text    : 'Test',
                                handler : function() {
                                    var panel = Ext.create('Ext.Panel', {
                                        fullscreen : true,
                                        html       : 'Test'
                                    });
                                    Ext.Viewport.setActiveItem(panel);
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

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