Duplicate reference when maximizing/restoring dialog

Question

When maximizing/restoring a dialog that contains some form fields with names, like:

Ext.create('Ext.Dialog', {
  maximizable: true,
  items: {
      xtype: 'textfield',
      name: 'id',
      bind: '{record.id}'
  },
  buttons: [{
    text: 'Save',
    bind: {
      disabled: '{!record.valid}'
    }
  }]
}).show();

we're getting an error:

Ext.mixin.Container.attachNameRef(): Duplicate name: "id" on ext-viewport between ext-textfield-1 and ext-textfield-5

Answer 1

Two found workarounds :

1. Disable animation

Ext.define('Override.Dialog', {
  override: 'Ext.Dialog',
  config: {
    maximizeAnimation: false,
    restoreAnimation: false
  }
});

2. Make the proxy used for animation have no items (nor buttons since button disable state may not reflect the bounded value

Ext.define('Override.Dialog', {
  override: 'Ext.Dialog',
  config: {
    maximizeProxy: {
      items: null,
      buttons: null
    }
  }
});

Answer 2

Background Information

During maximize and minimize ExtJS creates a shadow clone. This will create a clone of the window, while you still have the original item.

Using an ID means, there can only be one identical one at any given time.

The clone tries to create the your textfield with the same ID, which does not work.

Typically you want to

• for forms you usually do not need to grab each item as you can work with validator and getValues on the form
• otherwise you might want to work with references in the view and lookupReference in the controller.
• not use animation (because that does not create a clone)
• write your own maximize animation and do the animation part yourself (write your own maximize function)