ExtJs4学习（四）：Extjs 中id与itemId的差别

为了方便表示或是指定一个组件的名称，我们一般会使用id或者itemId进行标识命名。

（推荐尽量使用itemId。这样能够降低页面唯一标识而产生的冲突）

id：

id是作为整个页面的Component的唯一标识，这也意味着在整个页面中仅仅同意有唯一一个名称的id。同一时候这里的Component的id也将变为element中的id，所以假设出现了两个，页面将会出现崩塌变形等等不能够想象的问题。

而作为一个组件是必须有自己的唯一标识(id)的，在没有设置Component的id的时候系统将自己主动为组件加入id

itemId：

itemId是用于container底下的元件的。这也说明itemId仅仅是一个局部的元件标识名称，在全局上是不须要遵循唯一性的。

从上面的叙述中能够看出一些使用上需注意的地方

若你要取得相关的Component 若是属于container 请设置id

若是仅仅属于某个container 底下的元件，请设置itemId；某些情况下当然你也能够连同id 一起设置，比方须要改变css style，除此之外itmeid 还是优先的选择

getCmp 以及getComponent 是不一样的，使用上必须注意。必须搭配id 以及itemid 使用

如此一来id 与itemid 就会有从属关系，非必要不需定义id。也不会造成在定义id 时须要编码避免重覆。而由于itemid 是属于某个id 底下的，所以即使itemid 重覆，也能够利用唯一的id 利用Ext.getCmp 取得參照后，在接着使用getComponent
取得所属itemId 的參照。

怎么获取id和itemId的组件和元件（从以上能够明显的看出，itemId是个局部的元件名称）：

id： Ext.getCmp(id)；

itemId：Ext.getCmp(id).getComponent(itemId)；

再看一段代码

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');
p1 = c.child('#p1');

p2 = p1.ownerCt.getComponent('p2');
p2 = p1.ownerCt.child('p2');

p1,p2中的itemid换成id。用p1 = c.child('#p1')方式获取; 相同也是能够获取到的，但肯定不合适。

你能够想象下，假设你再创建了一个c呢，id就反复了。

我们能够简单的理解为id是全局变量，itemid是局部变量