Hybrid View

  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

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