ExtJS：组件VS元素VS其他

Question

我已经和ExtJS合作了好几个月了，但是仍然没有一个非常清晰的地图，说明幕后发生了什么。我只是在谈论框架的构建块及其最基本的功能。

• Ext.Component
• Ext.Element的
• DOM.Element
• DOM.Node（？）
• CompositeElement（？）
• 还有什么（？）

对于上述每一个，我想知道：

1. 如何选择：按ID，按类，通过父级，查找（或子级OR查询或选择？WTF），兄弟姐妹，ComponentQuery，DOM查询，CSS查询，等。

2. 如何在树中操作：创建，追加，前置，插入此兄弟之后，移动到该父级，删除，销毁等等。

3. 如何在屏幕上操作：显示，隐藏，淡出，滑动，上移，下移，更改大小等。

4. 如何识别彼此相关：找到知道其Ext.Component的DOM.Element，找到知道其DOM.Element等的Ext.Component。

5. 它们之间的依赖关系是什么：如果DOM.Element的Ext.Component被隐藏/销毁/更改/移动会发生什么，如果它的Ext.Component会发生什么？ Ext.Element被隐藏/销毁/更改/移动等等。

我正在寻找一个有条理且逻辑清晰的布局，说明每个应该如何使用并且预计会表现出来。我也希望所描述的功能可以分组在相应的类别中，例如很高兴看到补充遍历方法.up()和.down()彼此相邻，而不是按字母顺序分页。当然，也欢迎链接和示例（official documentation非常缺乏）！

Answer 1

你可以从手册中找到关于ExtJS（称为Ext Core）的构建块的很多内容：http://docs.sencha.com/core/manual/。我将尝试添加一些知识并突出一些关键点，但您应该仔细阅读这些内容以获得非常丰富的概述。

<强> Ext.Component
ExtJS中OOP范例的构建块。从本质上讲，这是一个包含继承功能的Object，作为专用组件的基础，该组件将由框架转换为显示为HTML的DOM元素。

Sencha文档非常适合这一点。这里有几个好的开始： http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers http://docs.sencha.com/extjs/4.2.1/#!/guide/components

Ext.Element与DOM元素
正如JavaScript开发所知，DOM元素只是一个JS对象，它表示文档HTML中的标记。实质上，Ext.Element是DOM元素的包装器对象，允许ExtJS操作对象。页面上的任何DOM元素都可以包装为Ext.Element以允许此附加功能。

例如，请使用此HTML标记：

<div id="myDiv">My content</div>

您可以使用

访问此内容

var el = document.getElementById('myDiv')

并在el上使用基本的内置JavaScript DOM功能。您也可以使用

访问它

var el = Ext.get('myDiv')

并使用ExtJS库

可以使用一整套额外的功能来应用于该元素

Sencha文档对此也非常出色。在此处查看Ext.Element的所有可用功能：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element

<强>其它
您可以使用Ext.Element方法从组件中获取getEl()：

var myComponent = Ext.create('Ext.Component', { html: 'my component' });
var el = myComponent.getEl();

您很少需要采用其他方式来确定DOM元素中的组件。除非你真的是黑客攻击，否则那里没有太多的用例。使用像ExtJS这样的框架的一个主要原因是为了防止需要做这样的事情;如果要完全在JavaScript中开发，你应该能够避免引用需要获取其包含ExtJS组件的DOM元素。

Niklas很好地回答了如何选择组件和元素。我真正要添加的唯一内容是您可以使用up()和down()来选择相对于组件的内容。这样，您应该在组件上使用itemId而不是全局标识id（如果重用具有相同ID的组件，则使用id会导致难以调试的错误）。

另外，为了增加Niklas关于显示/隐藏组件的答案，框架确实在组件的元素中添加了一些CSS，具体取决于组件的hideMode。在此处详细了解该属性：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-hideMode

了解更多内容的一个好方法是查看随框架打包的所有示例。在浏览器中打开示例，然后查看代码以了解事情是如何完成的。您会发现以这种方式学习更容易，而不是在纸上或网站上阅读。在学习新事物方面，没有什么比体验更好的了。

Answer 2

如何选择：按ID，按类，通过父级，查找（或子级OR查询或选择？WTF），兄弟姐妹，ComponentQuery，DOM查询，CSS查询等。< /强> 的

Ext.ComponentQuery.query("*")                   // get all
Ext.ComponentQuery.query("button")              // all buttons
Ext.ComponentQuery.query("#myid")               // all controls / components myid
Ext.ComponentQuery.query("#myid", rootelement)  // all controls / components myid with rootelement
Ext.ComponentQuery.query("#myid,button")        // all buttons or controls / components myid

如何在树中操作：创建，追加，前置，插入此兄弟之后，移动到该父级，删除，销毁等等。

向视图添加按钮：

Ext.ComponentQuery.query("#viewId")[0].add(new Ext.Button({ text: 'test'}));

还有insert，remove等等，具体取决于您要查询的控件。

如何操作屏幕：显示，隐藏，淡入淡出，上移，下移，更改大小等。

Ext.ComponentQuery.query("button").forEach(function(button){ button.hide(); })      // hide all buttons

还有show，disable，enable等等，具体取决于您要查询的控件。

如何识别彼此相关：找到知道其Ext.Component的DOM.Element，找到知道其DOM.Element等的Ext.Component。

查找Ext.Component知道其Dom.Element非常简单，只需从DOM元素中获取ID并使用Ext.ComponentQuery.query("#id")即可。 还有Ext.select('#id')用于从ID获取对象。

使用element属性可以获得DOM：

var dom = Ext.ComponentQuery.query("button")[0].element.dom // Getting the DOM from the first button
var dom2 = component.element.dom                            // does also work as long as component is a valid sencha touch component

它们之间有什么依赖关系：如果DOM.Element的Ext.Component被隐藏/销毁/更改/移动会发生什么，如果Ext.Component的Ext.Element是什么，它会发生什么？隐藏/销毁/更改/移动等

我想，我不确定，如果你打电话给.hide，那么会有一些CSS应用于DOM，例如：display: none。在内部，他们可以使用jQuery这样的框架或旧学校版本document.getElementById('id').css等等。如果您致电.show，它可能会更改为display: block或之前的任何类型（可以保存在Sencha Touch类中）。

我不知道如果DOM元素被破坏会发生什么。可能也是元素，然后垃圾收集器有一些工作要做。

如果还有其他问题/某些问题不明确或不够，请不要犹豫。

Answer 3

试图自己回答这个问题。

由于no TABLE markup support on this website，我将答案放在this shared Spreadsheet中。请注意鼠标翻转的注释。

现在只是一种模式。它需要工作才能更清晰，更完整。请随意发表评论，或者询问我是否要编辑它。