ExtJS:组件VS元素VS其他

Question

我已经和ExtJS合作了好几个月了,但是仍然没有一个完全清晰的地图来了解幕后发生的事情.我只是谈论框架的构建块及其最基本的功能.

• Ext.Component
• Ext.Element的
• DOM.Element
• DOM.Node(？)
• CompositeElement(？)
• 无论如何 (？)

对于上述每一个,我想知道:

1. 如何选择:按ID,按类,通过父,查找(OR子OR或查询或选择？WTF),兄弟姐妹,ComponentQuery,DOM查询,CSS查询等.

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

3. 如何操作屏幕:显示,隐藏,淡入淡出,滑动,上移,下移,更改大小等.

4. 如何识别彼此相关:找到DOM.Element知道它的Ext.Component,找到Ext.Component知道它的DOM.Element等.

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

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

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/#!/导件/组件

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')

并使用基本的内置JavaScript DOM功能el.您也可以使用它来访问它

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元素.

尼克拉斯很好地回答了如何选择组件和元素.我真正添加的唯一内容是您可以使用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 子项 OR 查询 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等等，具体取决于您查询的控件。

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

查找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 被隐藏/销毁/更改/移动，那么 DOM.Element 会发生什么情况；如果 Ext.Element 被隐藏/销毁/更改/移动，那么 Ext.Component 会发生什么情况，等等。

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

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

如果还有其他问题/不清楚或不够，请随时询问。