需要在同一个窗口中访问两个标签面板中使用的相同 id 的组件，不能使用 getCmp()答案

【问题标题】：Need to access a component of same id used in two tab panel in a same window , can't use getCmp()需要在同一个窗口中访问两个标签面板中使用的相同 id 的组件，不能使用 getCmp()
【发布时间】：2013-03-20 12:25:18
【问题描述】：

我正在使用 Extjs 4.0.7，我正在使用一个面板，在该面板内我使用两个选项卡，每个选项卡都包含一个用于插入数据的表单。

对于每个表单，我添加了一个具有相同 id 的 dockedItem 组件。我的问题从这里开始，添加该组件以显示来自服务器的错误消息或表单的验证错误。

如果我们在一个窗口中只使用该表单一次没有问题，我使用Ext.getCmp('component-id')；到 setError 到那个组件。

但在活动窗口中使用两个或多个表单时，有时会在form2 错误fieldl 中显示form1 的错误，因为每个表单都使用相同的组件id。

我读到你应该尽量避免在 extjs 中使用getCmp()。

我该如何解决这个问题？

【问题讨论】：

标签： extjs

【解决方案1】：

使用 itemId。 itemId 只需要在其容器层次结构中是唯一的：

Ext.require('*');

Ext.onReady(function() {

    new Ext.form.Panel({
        renderTo: document.body,
        width: 300,
        items: {
            xtype: 'textfield',
            fieldLabel: 'Field 1',
            itemId: 'field1'
        },
        tbar: [{
            text: 'Mark',
            handler: function(){
                this.up('form').down('#field1').markInvalid('Foo');
            }
        }]
    });

    new Ext.form.Panel({
        renderTo: document.body,
        width: 300,
        items: {
            xtype: 'textfield',
            fieldLabel: 'Field 1',
            itemId: 'field1'
        },
        tbar: [{
            text: 'Mark',
            handler: function(){
                this.up('form').down('#field1').markInvalid('Foo');
            }
        }]
    });

});

【讨论】：

+1 好例子。他正在使用 ExtJs4，因此您可以改用 Ext.create。
您可以，但在这种情况下，您为什么要这样做？一切都是必需的。
更好的错误信息。我猜只是偏好问题；）

【解决方案2】：

当您动态创建表单对象传递 ID 时，您将拥有不同的表单 ID。

您也可以尝试使用组件查询。

【讨论】：