1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    411
    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
    37,525
    Vote Rating
    872
    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