8

我已经使用 ExtJS 工作了好几个月了，但仍然没有完全清楚地了解幕后发生的事情。我只是在谈论框架的构建块及其最基本的功能。

  • 扩展组件
  • 外部元素
  • DOM.元素
  • DOM.Node (?)
  • 复合元素 (?)
  • 不管怎么说 （？）

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

  1. 如何选择：按 ID、按类、通过父项、查找（OR 子项 OR 查询 OR 选择？WTF）、兄弟、ComponentQuery、DOM-query、CSS-query 等。

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

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

  4. 如何识别相互关联：知道它的Ext.Component找到DOM.Element，知道它的DOM.Element找到Ext.Component，等等。

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

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

4

3 回答 3

7

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

Ext.Component
ExtJS 中 OOP 范例的构建块。本质上，这是一个包含继承功能的对象，可作为专用组件的基础，该组件将由框架转换为显示为 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 vs 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. 您也可以使用

var el = Ext.get('myDiv')

并拥有一整套额外的功能可用于使用 ExtJS 库应用于该元素

Sencha 文档也非常适合这一点。在此处查看所有可用功能：http Ext.Element: //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

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

于 2013-09-17T17:14:00.643 回答
2

如何选择：按 ID、按类、通过父项、查找（OR children OR query OR select？WTF）、兄弟姐妹、ComponentQuery、DOM-query、CSS-query 等。

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。disableenable

如何识别相互关联：知道它的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.Element 被隐藏/销毁/更改/移动，Ext.Component 会发生什么等.

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

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

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

于 2013-09-16T12:34:03.147 回答
1

试图自己回答这个问题。

由于本网站不支持 TABLE 标记，因此我将答案放在此共享电子表格中。注意鼠标悬停的注释。

现在只是一个模式。它需要工作才能变得更加清晰和完整。随意评论，或者问我是否要编辑它。

于 2013-09-19T21:34:42.707 回答