up() 和 down() 与 Ext.getCmp() 的区别

Question

我非常困惑在使用grep对象时应该使用up()、down()还是Ext.getCmp(ID)。

对我来说，更容易的方式是将ID定义为对象，并通过Ext.getCmp('ID')检索对象，这样代码看起来更加清晰。

举个例子：

console.log(this.up('panel').up('panel').down('grid'));
console.log(Ext.getCmp('myPanel'));

哪一个更好，以提高性能为例？

- Expert wanna be

---

如果追求性能，getCmp可能更好。但是如果你要使用getCmp，你应该使用UUIDs。然而，性能并不是一切。 - Neil McGuigan

Answer 1

使用ID和getCmp来查找组件存在严重的问题。主要问题在于，由于大多数情况下标记会创建具有重复ID的HTML元素，这是无效的HTML，因此您不能安全地重用组件。此外，当您有两个具有相同ID的组件时，您将遇到意外行为，这很难跟踪，因为框架无法正确引用您的组件。

有几篇博客和论坛帖子以及J. Garcia的视频涵盖了这个主题。建议仅将getCmp用于调试，对于生产就绪的代码，请切换到其他方法（up，down，refs，itemId和ComponentQuery）。

- dbrin

---

我可以提供一个相反的观点：我认为在“ID”旁边放置“组件重用”和“使用相同ID的两个组件”这些词有些奇怪，因为已经多次强调ID必须是唯一的。我是那些关心DOM外观的人之一，所以有很多IDs和ItemIds，只是为了避免使用ExtJS自动生成的ids。我只是认为使用ExtJS不应该意味着DOM变得像大猩猩一样臃肿。 - Izhaki

无论如何，鉴于这是被接受的答案并且为了他人的利益，我认为问题的标题应该更改为类似“我是否应该在ExtJS中使用ID”的内容。我曾经认为性能是关键问题。 - Izhaki

Izhaki，我同意你在适当情况下使用ID的“司法”用法。我自己也会在视口组件的核心布局中使用它们。但是看看这个问题-太多人不理解使用组件ID的含义以及它们对DOM和应用程序行为的影响。 - dbrin

不错啊！祝贺你达到了6K；-) - sra

Answer 2

Ext.getCmp() 使用内部哈希映射，因此速度非常快，几乎与基于键检索数组中的值一样快。

.up() 和 down() 使用组件层次遍历实现，这是一个较慢的过程。

但是 up() 和 down() 使用选择器，因此它们也可以选择类，而不仅仅是id。

您只需要记住，有各种情况下可能需要使用 up() 或 down()，例如当有多个控件共用一个处理程序时，或者当您要获取的组件是由框架自动生成的，因此您无法自己设置其id。

- Izhaki

---

我听说使用getCmp不是一个很好的做法，因为如果您需要访问对象，您应该能够在控制器中轻松地获取它。我意识到有些情况下这种方法行不通，但我只是说出了我所听到的。 - incutonez

诚然，当使用MVC框架时，你可能会看到更少的Ext.getCmp()，而更多地使用refs及其相应的getter。但我认为这更多是样式上的问题。使用refs的另一个优点是，如果您更改组件的ID，您只需要在refs中更新它，而使用getCmp()则需要进行代码基础搜索和替换。 - Izhaki

没错，这就是我听说使用MVC框架更好的另一个原因。我的意思是，如果可以使用它，那么使用它是有道理的，但是像我说的，有时必须使用getCmp。 - incutonez

所以，您说在Ext JS 4中Ext.getCmp非常快，而在3中我应该避免使用它？http://www.sencha.com/forum/showthread.php?109307-Screencast-quot-The-dangers - Christiaan Westerbeek

不。如果您查看3.4中Ext.getCmp的源代码，您会发现它也非常快速。 - Izhaki