extjs - 在 Extjs 中使用 Id 和 itemId 访问组件

Question

在 ExtJs 最佳实践中，我不使用 Id 来访问 Ext 组件，而是使用 ItemId，我是使用 ItemID 访问组件的新手。 , 有没有人可以帮助我了解默认语法或访问组件的方式。

同样在消息框中单击是，我需要禁用屏蔽页面中的某些组件，这是否可以在 ItemID 的帮助下实现?请解释。

使用时的感觉ItemiD它可能会返回元素/组件数组，因此如果需要获取确切的组件，我需要再次迭代。我也有这个疑问....

Answer 1

id 和 itemId 之间的基本区别是

当您为组件使用 id 时，此组件必须有一个实例 , 如果您创建另一个具有相同 ID 的实例 ，您将遇到问题，因为 DOM 被混淆了。

当您使用 itemId 时，它应该仅在组件的直接容器中是唯一的。组件的容器维护一个子 ID 列表。

所以最好的做法是使用 itemId 而不是 id

现在如何访问？

如果你使用 id
Ext.getCmp('id')
或者
document.getElementById('id')
或者
Ext.ComponentQuery.query("#id")[0]
如果您使用 itemId
parentContainer.getComponent('child_itemId') ,

引用下面的例子

例如

 var parentContainer= Ext.create('Ext.panel.Panel', {
         initComponent: function(){
            Ext.applyIf(me, {
               //childrens
               items: [{
                          xtype:'textfield',
                          itemId:'text'
                       },
                       {
                           xtype:'panel',
                           itemId:'childpanel',
                           items:[
                                 {
                                     xtype:'combobox',
                                     itemId:'combo'
                                 }
                           ]
                       }]
            });
            this.callParent(arguments);
        },
        renderTo:Ext.getBody()

    })

在上面的例子中

用于访问文本字段使用

parentContainer.getComponent('text');

用于访问组合框使用

parentContainer.getComponent('childpanel').getComponent('combo');

或者

Ext.ComponentQuery.query("#combo")[0];

这将在页面中返回带有 id 组合的项目数组
对于这些你应该使用唯一的 itemId 这样你就会得到你正在搜索的第一个项目

或者

parentContainer.queryById('combo');

您也可以使用 Ext.util.MixedCollection

        var fields = new Ext.util.MixedCollection();
        fields.addAll(parentContianer.query('[isFormField]'));
        var Combo = fields.get('combo');