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

[shepsii]

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:

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.

[shepsii]

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.

[Jamie Avins]

Thank you for the report.

[rdougan]

This is working fine for me using 2.0.0. Same for you?

[BostonMerlin]

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

[shepsii]

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.

[BostonMerlin]

Right on, Shepsil. That worked.

Thanks for the tip!
John