ExtJS:组件 VS 元素 VS 其他 [英] ExtJS: Component VS Element VS other

问题描述

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

• 外部组件
• 外部元素
• DOM.Element
• DOM.Node (?)
• 复合元素 (?)
• 还有什么(?)

对于上述每个我想知道的:

1. 如何选择:按 ID、按类、通过父项、查找(OR 子项 OR 查询 OR 选择?WTF)、兄弟项、ComponentQuery、DOM 查询、CSS 查询、等等.

2. 如何在树中操作:创建、追加、前置、在此兄弟之后插入、移至该父级、删除、销毁等.

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

4. 如何确定相互关联:知道它的Ext.Component就找到DOM.Element，知道它的DOM.Element就找到Ext.Component等等.

   莉>

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

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

解决方案

您可以从手册中找到很多关于 ExtJS(称为 Ext Core)的构建块的信息:http://docs.sencha.com/core/manual/.我将尝试添加一些知识并强调一些关键点，但您一定要通读这些内容以获得非常有用的概述.

外部组件
ExtJS 中 OOP 范式的构建块.本质上，这是一个包含继承功能的对象，作为专用组件的基础，该组件将由框架转换为显示为 HTML 的 DOM 元素.

Sencha 文档在这方面非常出色.这里有几个不错的起点:http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containershttp://docs.sencha.com/extjs/4.2.1/#!/guide/组件

Ext.Element 与 DOM 元素
JavaScript 开发人员都知道，DOM 元素只是一个 JS 对象，它代表文档 HTML 中的标签.本质上，Ext.Element 是 DOM 元素的 包装器对象，允许 ExtJS 操作该对象.页面上的任何 DOM 元素都可以包装为 Ext.Element 以实现此附加功能.

以这个 HTML 标签为例:

我的内容

您可以使用

访问此

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

杂项
您可以使用 getEl() 方法从组件中获取 Ext.Element:

var myComponent = Ext.create('Ext.Component', { html: '我的组件' });var el = myComponent.getEl();

您很少需要走另一条路，从 DOM 元素确定组件.除非您真的在破解某些东西，否则那里没有太多用例.使用像 ExtJS 这样的框架的一个主要原因是为了防止需要做这样的事情；如果应该完全在 JavaScript 中开发，您应该能够避免引用 DOM 元素，您需要在其中获取其包含的 ExtJS 组件.

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

此外，为了补充 Niklas 关于显示/隐藏组件的回答，框架确实向组件的元素添加了一些 CSS，具体取决于组件的 hideMode 是什么.在此处了解有关该属性的更多信息:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-hideMode

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

I've been working with ExtJS for a good few months now, but still don't have a perfectly clear map of what's going on behind the scenes there. I'm just talking about the building blocks of the framework and their most basic functionality.

• Ext.Component
• Ext.Element
• DOM.Element
• DOM.Node (?)
• CompositeElement (?)
• Whatever else (?)

For each of the abovementioned I would like to know:

1. How to select: by ID, by class, via parent, find (OR children OR query OR select? WTF), siblings, ComponentQuery, DOM-query, CSS-query, etc..

2. How to manipulate in the tree: create, append, prepend, insert after this sibling, move to that parent, remove, destroy, etc..

3. How to manipulate on the screen: show, hide, fade, slide, move up, down, change size, etc..

4. How to identify related to each other: find DOM.Element knowing its Ext.Component, find Ext.Component knowing its DOM.Element, etc..

5. What is the dependency between them: what happens to the DOM.Element if its Ext.Component is hidden / destroyed / changed / moved, what happens to the Ext.Component if its Ext.Element is hidden / destroyed / changed / moved, etc.

I'm looking for a methodical and logically clear layout of how each is supposed to be used and is expected to behave. I am also hoping that the described functionality can be grouped in corresponding categories, e.g. would be nice to see complement traversing methods .up() and .down() next to each other, rather than alphabetically pages apart. Of course links and examples (which the official documentation lacks so badly) are also welcome!

解决方案

You can find out a whole lot about the building blocks of ExtJS (known as Ext Core) from the manual for this: http://docs.sencha.com/core/manual/. I will try to add some knowledge and highlight some key points, but you should definitely read through that for a very informative overview.

Ext.Component
The building block for the OOP paradigm within ExtJS. Essentially, this is an Object that contains inherited functionality to serve as the basis for a specialized component that will be transformed by the framework into DOM elements that are shown as HTML.

The Sencha documentation is excellent for this. Here are a couple good places to start: http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers http://docs.sencha.com/extjs/4.2.1/#!/guide/components

Ext.Element vs DOM Element
As an JavaScript develop knows, a DOM element is just a JS object that represents a tag in the document's HTML. Essentially, Ext.Element is a wrapper object for a DOM element that allows for ExtJS to manipulate the object. Any DOM element on the page can be wrapped as an Ext.Element to allow for this additional functionality.

For example, take this HTML tag:

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

You can access this using

var el = document.getElementById('myDiv')

and use the basic, built-in JavaScript DOM functionality on el. You could also access this using

var el = Ext.get('myDiv')

and have a whole additional set of functionality available to apply to that element using the ExtJS library

The Sencha docs are also excellent for this. See all the available functionality for Ext.Element here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element

Misc
You can get an Ext.Element from a component using the getEl() method:

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

You would rarely need to go the other way, to determine a component from a DOM element. There isn't much of a use case there unless you are really hacking something. A major reason for using a framework like ExtJS is to prevent needing to do something like this; if should develop entirely within the JavaScript, you should be able to avoid having a reference to a DOM element where you need to get its containing ExtJS component.

Niklas answered pretty well about how to select components and elements. The only things I would really add is that you can use up() and down() to select relative to a component. In this way, you should use itemId on components rather than the global identifier id (using id can cause difficult-to-debug errors if you are reusing components with the same ID).

Also, to add to Niklas's answer about showing/hiding components, the framework does indeed add some CSS to the component's element, depending on what the hideMode for the component is. Learn more about that property here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-hideMode

An excellent way to learn more is to look through all of the examples that come packaged with the framework. Open the examples in your browser, then look through the code to find out how things are done. You will find it way easier to learn this way, rather than reading it on paper or a website. Nothing beats experience when it comes to learning something new.

这篇关于ExtJS:组件 VS 元素 VS 其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！