So you’re in Sencha 1.1.x and need a custom overlay panel like an Ext.MessageBox but with a lot more options? This one in particular is set up to pop into view whenever you’re on this particular parent panel. I used a modded version of it to create an “Add to Homescreen” panel for iOS devices.

App.Bookmark = new Ext.Panel({
  floating         : true,
  modal            : true,
  centered         : true,
  width            : Ext.is.Phone ? '95%' : 400,
  height           : Ext.is.Phone ? '85%' : '60%',
  styleHtmlContent : true,
  mask : true,
  hideOnMaskTap    : false,
  scroll           : 'vertical',
  html             : 'Some html. Whatever. Knock yourself out.',
  dockedItems: [
    {
      dock  : 'bottom',
      html  : '
<div class="x-bookmark"><span class="x-bookmark-img"></span></div>

',
      width : '100%',
      style : {
        'margin' : (Ext.is.Phone) ? '1em 0 0 0.25em' : '1em 0 1em 50px' // Me getting picky
      }
    },{
      dock  : 'top',
      xtype : 'toolbar',
      title : 'Add Bookmark',
      ui    : 'light',
      items : [
        {
          xtype : 'spacer'
        },{
          iconMask : true,
          ui       : 'plain',
          iconCls  : 'delete',
          handler  : function() {
            App.Bookmark.hide('fade');
            ParentPanel.getEl().unmask();  // IMPORTANT
          }
        }
      ]
    }
  ]
});

App.ParentPanel = new Ext.Panel({
  id               : 'termsPanel',
  scroll           : 'vertical',
  layout           : 'fit',
  styleHtmlContent : true,
  html             : 'blah blah blah',
  listeners        : {
    activate  : function() {
      if (Ext.is.iOS) {
        this.getEl().mask();  // IMPORTANT
        var child = App.Bookmark;
        child.show('pop'); // OMG MAGIC!!!
        var width = (this.getWidth(false) - child.getWidth(false)) / 2;
        var height = Ext.is.Phone ? // Really don't need this or the set position... I just wanted it docked at the bottom
          (this.getHeight(false) - child.getHeight(false) + 35) :
          (this.getHeight(false) - child.getHeight(false)) * 2 / 3;
        child.setPosition(width,height);
      }
    }
  }
});

The gradient really shouldn’t be there. It doesn’t show up on the desktop. It does on the phone. Here’s a simple fix to add to your CSS:

.x-field-select:before {
    background: inherit !important;
}

If that doesn’t get rid of it you may have to set it to a specific color such as this:

.x-field-select:before {
    background: #F0EEDF !important;
}

This doesn’t seem to work on Ext.List, but you can add a List with “scroll:false” as a child of an Ext.Panel with “scroll:true” and add this listener to the Ext.Panel.  Now the next time the user goes back to that panel, they are at the top of the list, form, content, etc.

listeners          : {
  hide : function() {
    this.scroller.scrollTo({ x: 0, y: 0 })
  }
}

All you need to do is add this wonderful little listener and a timeout. If anyone knows how do do this globally as an override to the List type, I’m all ears.

listeners: {
  itemtap: function(record, index, item, e) {
    setTimeout(function(){record.deselect(index);},500);
  }
}