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（＆＃39; myPanel按钮[itemId = myButton]＆＃39;）[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);

    }
})

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

3 个答案: