[ExtJs] 컨포넌트의 itemId와 id의 차이점

ExtJS나 Sencha touch를 사용하여 프로그래밍을 하면 비번하게 컨포넌트를 쿼리해서 새팅하거나 값을 얻어오는 경우가 있다. 이때, 많이 사용하는 방법이 컨포넌트 쿼리에 xtype(alias)를 넣어 찾는 방법이다.

	update: function (data) {
		var topicField = this.down('textfield'),
		     objectiveField = this.down('textarea');
               // Do Something w/ topicField & objeictive
       }

다행히도 위와 같이 레퍼런스해야 할 컨포넌트의 xtype이 다르다면 쉽지만, 동일하다면 id를 사용하여야 한다. 

Ext.define('MyClass', {
        extend: 'Ext.panel.Panel',
        alias: 'mypanel',
        initComponent: function () {
            Ext.apply(this, {
			items: [{
				xtype: 'textfield',
				id: 'topic'
				fieldLabel: '주제',
				margin: '2 2 2 2',
				allowBlank: false,
				value: todo
			}, {
				xtype: 'textfield',
				fieldLabel: '목적',
                                id: 'objecive',
				margin: '2 2 2 2',
				name: 'objective',
				value: todo
			}]
            });
            this.callParent(arugments);
        },

	update: function (data) {
		var topicField = this.down('#topic'),
		     objectiveField = this.down('#objective');
               // Do Something w/ topicField & objeictive
       }

그러나, 위와 같이 id를 컨포넌트에 지정한 경우, MyClass의 인스턴스를 한번이상 생성시, 충돌이 발생한다.

이를 방지하기 위해서는 itemId를 사용할 수 있다.

Ext.define('MyClass', {
        extend: 'Ext.panel.Panel',
        alias: 'mypanel',
        initComponent: function () {
            Ext.apply(this, {
			items: [{
				xtype: 'textfield',
				itemId: 'topic'
				fieldLabel: '주제',
				margin: '2 2 2 2',
				allowBlank: false,
				value: todo
			}, {
				xtype: 'textfield',
				fieldLabel: '목적',
                                itemId: 'objecive',
				margin: '2 2 2 2',
				name: 'objective',
				value: todo
			}]
            });
            this.callParent(arugments);
        },

	update: function (data) {
		var topicField = this.down('#topic'),
		     objectiveField = this.down('#objective');
               // Do Something w/ topicField & objeictive
       }

이와 같이 하면, MyClass의 인스턴스를 한번이상 생성하더라도 문제가 발생하지 않는다.

이는 itemId가 컨포넌트 내부의 MixedCollection의 인덱스로 존재하는 로컬 스코프를 갖고 있기 때문이다.

다음은 ExtJS의 메뉴얼 문서의 내용을 캡쳐한 것이다.

출처: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-itemId

itemId : String

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.container.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts withExt.ComponentManager which requires a unique id.

var c = new Ext.panel.Panel({ //
    height: 300,
    renderTo: document.body,
    layout: 'auto',
    items: [
        {
            itemId: 'p1',
            title: 'Panel 1',
            height: 150
        },
        {
            itemId: 'p2',
            title: 'Panel 2',
            height: 150
        }
    ]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id, Ext.container.Container.query, Ext.container.Container.down and Ext.container.Container.child.