为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名。(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突)


id:

  id是作为整个页面的Component的唯一标识,这也意味着在整个页面中只允许有唯一一个名称的id,同时这里的Component的id也将变为element中的id,所以如果出现了两个,页面将会出现崩塌变形等等不可以想象的问题。

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



itemId:

  itemId是用于container底下的元件的,这也说明itemId只是一个局部的元件标识名称,在全局上是不需要遵循唯一性的。
   从上面的叙述中可以看出一些使用上需注意的地方
  1. 若你要取得相关的Component 若是属于container 请设置id

  2. 若是只属于某个container 底下的元件,请设置itemId;某些情况下当然你也可以连同id 一起设置,比如需要改变css style,除此之外itmeid 还是优先的选择

  3. 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是局部变量

ExtJs4学习(四):Extjs 中id与itemId的区别的更多相关文章

  1. 【转载】Extjs 中id与itemId的区别

    为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名.(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突) id:        id是作为整个页面的Com ...

  2. ExtJs4学习(四):Extjs 中id与itemId的差别

       为了方便表示或是指定一个组件的名称,我们一般会使用id或者itemId进行标识命名. (推荐尽量使用itemId.这样能够降低页面唯一标识而产生的冲突) id:   id是作为整个页面的Comp ...

  3. html元素中id和name的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...

  4. html中id name class的区别(转)

    HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客户 ...

  5. 在表单(input)中id和name的区别

    但是name在以下用途是不能替代的: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是 ...

  6. html css中id和class的区别比较

    在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用 ...

  7. 在表单(input)中id和name的区别

    但是name在以下用途是不能替代的:1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全 ...

  8. HTML中Id和Name的区别

    源地址:http://www.cnblogs.com/laodai/articles/2244215.html 在html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号 ...

  9. 属性中id和name的区别

    id 在HTML中的作用:      1.用id选择相应的style sheet(风格).       2. <A ..> 链接的目的地      3.脚本语言用它找目的地(找该id的标签 ...

随机推荐

  1. docker0详解

    docker0:https://blog.csdn.net/kubailing/article/details/87936501 veth pair详解:https://www.cnblogs.com ...

  2. python文件处理(对比和筛选)版本2

    场景:对比两个txt文件的差异,将对比结果写入html,将不同部分写入另一个txt #!/user/bin/python #!coding=utf-8 # -*- coding: utf-8 -*- ...

  3. clickhouse_各个引擎表的特点

    去重表:RepalcingMergeTree 1.使用order by排序键作为判断重复数据的唯一键 2.只有在合并分区的时候才会触发删除重复数据的逻辑 3.以数据分区为单位删除重复数据.当分区合并时 ...

  4. Git 上传基本命令

    注意:操作要保证在对应文件夹中打开Git bash here (例如:clone项目后要cd到文件中,否则报"git提示没有git存储库") 1.创建一个git裸服务器 (git ...

  5. 【Python】神器:Streamlit,仅使用Python开发一个运维管理后台(不需要编写html,js,css)

    背景 作为SRE,我们有很多很多自动化的工具,大部分都是自动运行的,还有一部分是CLI,我们一直苦于没有一个自己的管理后台网站,受限于前端能力薄弱,开发出来的网页只能说凑活能用,但是不好用. 现在我们 ...

  6. pika详解(二) BlockingConnection

    pika详解(二) BlockingConnection   本文链接:https://blog.csdn.net/comprel/article/details/94592348 版权 Blocki ...

  7. Qt开发技术:图形视图框架(二)场景QGraphicsScene、QGraphicsItem与QGraphicsView详解

    前话   Qt的图形视图框架,最核心的三个类为:QGraphicsScene.QGraphicsItem与QGraphicsView.   基于图形框架的高级白板软件Demo QGraphicsSce ...

  8. YOLOvi(i=1,2,3,4)系列

    YOLOvi(i=1,2,3,4)系列 YOLOv4论文链接:https://arxiv.org/pdf/2004.10934.pdf YOLOv4源码链接:https://github.com/Al ...

  9. Wide-Bandgap宽禁带(WBG)器件(如GaN和SiC)市场将何去何从?

    Wide-Bandgap宽禁带(WBG)器件(如GaN和SiC)市场将何去何从? Where Is the Wide-Bandgap Market Going? 电力电子在采用宽禁带(WBG)器件(如 ...

  10. 剑指 Offer 06. 从尾到头打印链表

    链接:https://leetcode-cn.com/problems/cong-wei-dao-tou-da-yin-lian-biao-lcof/ 标签:链表 题目 输入一个链表的头节点,从尾到头 ...