Extjs中使用Id和itemId访问组件

Question

在 ExtJs 最佳实践中，我经历了不使用 Id 访问 Ext 组件而是使用 ItemId，我在使用 ItemID 访问组件方面非常陌生，有没有人可以帮助我使用默认语法或方式访问组件。

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

我觉得在使用 ItemiD 时它可能 return 个 elements/components 数组，所以如果需要得到一个确切的组件我需要再次迭代。我也有这个问题....

Answer 1

您可以使用 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 2

假设您定义如下面板，其中有一个按钮。现在要访问此按钮，您可以使用 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);

    }
})

Answer 3

id 和 itemId 之间的基本区别是

当你为一个组件使用一个 id 时，必须有这个组件的一个实例，如果你创建另一个具有相同 id 的实例，你会遇到问题，因为 DOM 很混乱。

当您使用 itemId 时，它应该只在组件的直接 container.the 组件的容器中保持一个子 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];

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

或

parentContainer.queryById('combo');

你也可以使用Ext.util.MixedCollection

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

Extjs中使用Id和itemId访问组件

Using Id and itemId in Extjs to access components

extjs

sencha-architect