1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      0  

    Question Unanswered: Overlay panel: not properly rendered and behaved...

    Unanswered: Overlay panel: not properly rendered and behaved...


    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!

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    There are quite a few issues with masking/overlaying/floating components in the current release of ST which we are currently working on.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 1

Tags for this Thread

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