最大化/恢复对话框时重复引用答案

【问题标题】：Duplicate reference when maximizing/restoring dialog最大化/恢复对话框时重复引用
【发布时间】：2021-09-19 23:56:56
【问题描述】：

当最大化/恢复包含一些带有名称的表单字段的对话框时，例如：

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

我们遇到了一个错误：

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

【问题讨论】：

标签： extjs extjs6-modern extjs7

【解决方案1】：

两个找到的解决方法：

禁用动画

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

使用于动画的代理没有项目（也没有按钮，因为按钮禁用状态可能无法反映有界值

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

【讨论】：

【解决方案2】：

背景信息

在maximize 和minimize 期间，ExtJS 创建了一个影子克隆。这将创建一个窗口的克隆，而您仍然拥有原始项目。

使用 ID 意味着，在任何给定时间只能有一个相同的。

克隆尝试创建具有相同 ID 的文本字段，但不起作用。

通常你想要

对于表单，您通常不需要抓取每个项目，因为您可以在表单上使用 validator 和 getValues
否则，您可能希望在视图中使用references，在控制器中使用lookupReference。
不使用动画（因为不会创建克隆）
编写自己的最大化动画并自己完成动画部分（编写自己的最大化函数）

【讨论】：

您好，感谢您的更新。实际上，具有name 属性的任何字段都会出现此问题，尤其是ID