I am trying to create a overlay panel over viewport, and put some components into this overlay panel, so I tried following codes:
Code:
<!DOCTYPE html><html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> 
    <meta name="apple-mobile-web-app-capable" content="yes"/> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Test</title>
     <link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css">	<script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
    <script type="text/javascript">
    Ext.setup({
        onReady : function() {
            Ext.create('Ext.Panel', { //viewport panel
                fullscreen: true,
                layout: 'fit',
                html: 'test'
            });
            
            var overlayPanel = Ext.create('Ext.tab.Panel', { //overlay panel
                floating: true,
                modal: true,
                tabBarPosition: 'bottom',
                width:  400,
                height: 600,
                items: [
                {
                    title: 'Settings',
                    iconCls: 'settings',
                    layout: 'fit',
                    items: [{
                        xtype: 'panel',
                        id: 'settingPanel',
                        layout: 'vbox',
                        items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            title: 'Settings'
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Search',
                            items: [
                            {
                                xtype: 'togglefield',
                                label: 'Enable'
                            },
                            {
                                xtype: 'selectfield',
                                label: 'Search By',
                                options: 
                                [{
                                    text: 'GDP',
                                    value: '0'
                                },
                                {
                                    text: 'Profit',
                                    value: '1'
                                }]
                            }]
                        }]
                    }]
                }]
            });
            
            overlayPanel.show();
        }
    });
    </script>
</head>
<body>
</body>
</html>
but there are several issues:
1. overlay panel becomes transparent
2. overlay panel lost border
3. selectfield hideOnMaskTap: the option panel of selectfield doesn't hide when tap at the overlay panel, only works when tap in viewport panel, i.e., outer space other than overlay panel
4. If I first change the selection of selectfield, the mask will be gone, then, the hideOnMaskTap config of overlayPanel doesn't work anymore....

I am wondering do I need to apply more configs into overlayPanel? and if so, what configs?

wish somebody can help me out!!

thanks!