为了方便表示或是指定一个组件的名称,我们通常会使用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. SpringBoot + WebSocket 实现答题对战匹配机制

    概要设计 类似竞技问答游戏:用户随机匹配一名对手,双方同时开始答题,直到双方都完成答题,对局结束.基本的逻辑就是这样,如果有其他需求,可以在其基础上进行扩展 明确了这一点,下面介绍开发思路.为每个用户 ...

  2. docker中ubuntu源更新慢加速 换为国内源 Debian10源

    本来以为是Ubuntu打包的镜像,换了阿里源老是报错100公钥不可用,结果发现是Debian的操作系统,换位Debian的操作系统打包的,换位Debian的源即可 #源如果使用错误也会报错,没有Deb ...

  3. 图解CSS布局(一)- Grid布局

    图解CSS布局(一)- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可 ...

  4. 给MySQL数据表加入uuid

    alter table table_name add column uuid VARCHAR(255) default "0" update table_name set uuid ...

  5. 【补档STM32】STM32F103俄罗斯方块游戏实现

    项目地址:https://gitee.com/daycen/stm32-tetris/tree/master 使用Keil uVision5打开即可 一.概述 ​ 本文介绍了一个基于STM32的俄罗斯 ...

  6. python解析ua

    一个非常神奇的包可以帮助我们优雅的解析浏览器的UA,他的名字叫做user_agents pip install pyyaml ua-parser user-agents >>>ua_ ...

  7. Rabbitmqpool

    import pika import threading import random import uuid import json # 框架模块 from django.conf import se ...

  8. NVIDIA TensorRT:可编程推理加速器

    NVIDIA TensorRT:可编程推理加速器 一.概述 NVIDIA TensorRT是一个用于高性能深度学习推理的SDK.它包括一个深度学习推理优化器和运行时间,为深度学习推理应用程序提供低延迟 ...

  9. 使用Keil语言的嵌入式C编程教程(上)

    使用Keil语言的嵌入式C编程教程(上) Embedded C Programming Tutorial with Keil Language Embedded System 嵌入式系统是指以单片机为 ...

  10. .NET平台系列21:云原生时代 .NET5 雄霸天下

    系列目录     [已更新最新开发文章,点击查看详细] 随着互联网持续高歌猛进,相关技术名词也是层出不穷.微服务.容器化.DevOps.ServerLess.FaaS,这两年最火的当属云原生Cloud ...