Here’s how to override the default template for an input label and make it an actual label, in semantic traditional 508 compliant markup.

Ext.override(Ext.form.TextArea, {
    renderTpl: [
        '<tpl if="label"><label for="{inputId}"><span>{label}</span></label></tpl>',
        '<tpl if="fieldEl"><div>',
            '<textarea id="{inputId}" type="{type}" name="{name}"',
            '<tpl if="tabIndex">tabIndex="{tabIndex}" </tpl>',
            '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',
            '<tpl if="style">style="{style}" </tpl>',
            '<tpl if="maxRows != undefined">rows="{maxRows}" </tpl>',
            '<tpl if="maxlength">maxlength="{maxlength}" </tpl>',
            '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
            '<tpl if="autoCapitalize">autocapitalize="{autoCapitalize}" </tpl>',
            '<tpl if="autoFocus">autofocus="{autoFocus}" </tpl>',
            '></textarea>',
            '<tpl if="useMask"><div></div></tpl>',
        '</div></tpl>'
    ]
});

(more…)

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 })
  }
}