Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2708 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    82
    Vote Rating
    2
    sencha-noob is on a distinguished road

      0  

    Default Modal panel's mask broken if not in Ext.Viewport

    Modal panel's mask broken if not in Ext.Viewport


    REQUIRED INFORMATION
    Ext version tested:
    • Sencha Touch 2.0.1 RC
    Browser versions tested against:
    • Chrome 19.0.1084.15 dev
    DOCTYPE tested against:
    • html
    Description:Steps to reproduce the problem:

    I have a modal panel that was added to another panel which has a card layout. After upgrading to 2.0.1 RC, the mask disappeared. Upon investigation I found that the mask had a height of 0.

    I found if I add the panel to the Ext.Viewport instead of the containing panel, it works as expected

    The result that was expected:
    • I expected the mask to cover up the containing panel
    The result that occurs instead:
    • The mask had a height of 0 and wasn't visible
    Modal Panel definition


    Code:
    ‚Äč
    Ext.define("myapp.Results", {    extend: 'Ext.Panel',
        xtype: "results",
    
    
        config: {
            height: 440,
            width:300,
            modal: true,
            centered: true,
            hideOnMaskTap: false,
                    <snip>

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    I can't seem to re-produce this. If you're using a custom SASS file (i.e app.scss), try to re-compile it

    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.add({
                layout: 'card',
                items: [
                    {
                        items: [
                            {
                                xtype: 'panel',
                                height: 440,
                                width: 300,
                                modal: true,
                                centered: true,
                                hideOnMaskTap: false
                            }
                        ]
                    }
                ]
            })
        }
    });
    Sencha Touch Lead Architect

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    82
    Vote Rating
    2
    sencha-noob is on a distinguished road

      0  

    Default


    Indeed it's no longer a problem & the css recompile was done a few days ago

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Excellent, thanks for getting back to us.

    Sencha Inc

    Jamie Avins

    @jamieavins

Thread Participants: 2