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

Question

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

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

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

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

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

我怎么解决这个问题？

Answer 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');
            }
        }]
    });

});

Answer 2

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

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