Question

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

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

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

但在活动窗口中使用两个或多个表单时，form1错误form2中的某些时候会显示fieldl错误，因为每个表单都使用相同的组件{{1 }}

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

我该如何解决这个问题？

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。

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

需要访问同一窗口中两个选项卡面板中使用的相同id的组件，不能使用getCmp（）

2 个答案: