Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    508
    Vote Rating
    74
    shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough

      0  

    Default Modal Form with Select Field on tablet: options popup under the modal Form Panel

    Modal Form with Select Field on tablet: options popup under the modal Form Panel


    Sencha Touch 2 RC2,

    Case: have a modal panel displayed centered, with a formpanel inside, on a tablet device. The form includes a selectfield. When the field is clicked to get the select options....


    Expected behavior: the options popup above the modal panel and mask, with a higher z-index than both

    Observed behavior: the options pop up under the modal panel's mask, with a lower z-index than the lower panel.

    Test case:
    Code:
    
    Ext.define('IWD.view.appointment.BookFakeCase', {
      extend: 'Ext.Panel',
      xtype: 'appointment-bookfake',
      apptId: 0,
      
      config: {
        layout: 'card',
        scrollable: false,
        itemId: 'bookFakeForm',
        modal: true,
        centered: true,
        hideOnMaskTap: false,
        showAnimation: 'fadeIn',
        hideAnimation: 'fadeOut',
        width: '80%',
        height: '300px'
    
        items: [
        {
          xtype: 'titlebar',
          docked: 'top',
          itemId: 'mainTitlebar',
          title: 'Book Case',
          items: [
          {
            itemId: 'backBtn',
            text: 'Cancel',
            ui: 'back',
            align: 'left'
          },
          {
            itemId: 'addBtn',
            text: 'Book',
            ui: 'confirm',
            align: 'right'
          }
          ]
        }
        ]
      },
      
      initialize: function() {
        
        var form = Ext.create('Ext.form.FormPanel', {
          layout: 'vbox',
          scrollable: 'vertical',
          items: [{
            xtype: 'fieldset',
            defaults: {
              labelWidth: '40%'
            },
            items: [
            {
              xtype: 'selectfield',
              name: 'nb_id',
              options: [{ user_id: 1, name: 'Option Number 1'}, { user_id: 2, name: 'Option Number 2'}],
    
              valueField: 'user_id',
              displayField: 'name',
              label: 'Agency or <br /> Solicitor'
            },
            {
              xtype: 'textfield',
              name: 'external_id',
              label: 'Reference'
            },
            {
              xtype: 'textfield',
              name: 'claimant_name',
              label: 'Claimant'
            }
            ]
          }],
          url: 'submiturl.php'
        });
        
        this.add(form);
        
        this.callParent(arguments);
        
      }
    });
    Observed on safari in windows and safari in ipad 2.

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    508
    Vote Rating
    74
    shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough

      0  

    Default


    Of course I come up with a workaround after 3 hours on this, but 5 minutes after reporting it as a bug .... ! If the modal panel is added to Ext.Viewport it's fine. Only an issue if it's added to a panel within Ext.Viewport then shown as modal and centered.

  3. #3
    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

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

      0  

    Default


    This is working fine for me using 2.0.0. Same for you?
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    I'm using touch 2.0 with architect 2. showing a modal centered panel with two select fields (panel is modal on top of a container). upon pressing the select, the modal area around my panel gets darker and i see the select popup somewhere behind the modal panel.

    What's the resolve or workaround? Thanks, John

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    508
    Vote Rating
    74
    shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough

      1  

    Default


    Make sure the modal panel is added to Ext.Viewport using its add method; don't add it to a container within the viewport. This sorted it for me.

  7. #7
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    Right on, Shepsil. That worked.

    Thanks for the tip!
    John