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

Question

在ExtJs最佳实践中,我经历过不使用Id访问Ext Components而不是使用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');