Ext.form.Fields rendered to a collapsed Panel with layout: 'anchor'/'form'/'absolute' suffer from incorrect anchor widths when the Panel is later expanded.

the field widths are only corrected
  • if the doLayout method is explicitly called after the Panel is expanded, or
  • if the Panel has monitorResize:true AND the browser window is resized AND the Field is visible (i.e. Panel is expanded) when the resize occurs

the call to doLayout must also occur after the Panel's onExpand method and before the Panel's afterEffect method to prevent a "flash of unstyled content".

drop-in example:
HTML Code:
<title>Anchor bug when rendering Fields to collapsed Panels</title>
<link rel="stylesheet" href="../resources/css/ext-all.css">
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all-debug.js"></script>

Ext.onReady(function() {
  new Ext.Panel({
    renderTo: document.body,
    layout: 'form', // or 'anchor', or 'absolute'
    title: 'A Collapsed Panel - Click title to expand',
    collapsible: true,
    titleCollapse: true,
    collapsed: true,
    frame: true,
    // setting monitorResize: true results in doLayout being called
    // on browser window resize, which then causes the textfield to
    // correctly resize to the specified anchor width of 95%
    // (but only if the textfield is visible when the resize occurs)
    monitorResize: true,
    items: [{
      xtype: 'textarea',
      anchor: '95%',
      fieldLabel: 'Test field anchored at 95%'
the following override resolves this issue
(the portion in red needs to be added to Panel's initComponent method)
Ext.override(Ext.Panel, {
  initComponent : function() {
    if (this.tbar) {
      this.elements += ',tbar';
      if (typeof this.tbar == 'object') {
        this.topToolbar = this.tbar;
      delete this.tbar;
    if (this.bbar) {
      this.elements += ',bbar';
      if (typeof this.bbar == 'object') {
        this.bottomToolbar = this.bbar;
      delete this.bbar;
    if (this.header === true) {
      this.elements += ',header';
      delete this.header;
    } else if (this.title && this.header !== false) {
      this.elements += ',header';
    if (this.footer === true) {
      this.elements += ',footer';
      delete this.footer;
    if (this.buttons) {
      var btns = this.buttons;
      this.buttons = [];
      for (var i = 0, len = btns.length; i < len; i++) {
        if (btns[i].render) { // button instance
        } else {
    if (this.autoLoad) {
      this.on('render', this.doAutoLoad, this, {delay:10});
    // fix incorrect initial width for Fields in a collapsed Panel
    // having layout:'anchor'/'form'/'absolute'
    if (this.collapsed) {
      // if Panel is rendered in a collapsed state, call doLayout once onExpand
      this.afterMethod('onExpand', this.doLayout, this);

      this.on('expand', function(o) { // discard the forced call to doLayout when done
        o.removeMethodListener('onExpand', o.doLayout, o);
      }, this, {single: true});
tested in IE7/FF2.0.0.13/FF3b5/Opera/Safari 3.1(Win), in plain old Panels (as in the drop-in example) and in Panels nested in FormPanels

the dancing Field observed when the Panel is collapsed / expanded is addressed in a separate thread: