在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')，

参考以下示例

e.g

 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');

Answer 2

您可以使用Ext.Component.query搜索和访问组件并传递itemId，请参阅以下链接： -

http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson5/2.cfm http://devjs.eu/en/how-to-use-ext-component-query-in-ext-js-4/

Answer 3

让我们假设你定义如下面的Panel，它有一个按钮。现在要访问此按钮，您可以使用Extjs ComponentQuery api。为了唯一地标识我的按钮，我可以使用Ext.ComponentQuery.query（'myPanel button [itemId = myButton]'）[0]。有关更多详细信息，请查看http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery

Ext.define('app.view.panel.MyPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myPanel',
    height: 360,
    width: 480,
    layout:'fit',
    title: 'My Panel',
    initComponent: function(){
        var me =this;
        me.items=[{
            xtype:'button',
            itemId: 'myButton'
            ... 
        }]
        this.callParent(arguments);

    }
})