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

问题描述

我已经在ExtJS上工作了好几个月了，但仍然没有一个完整清晰的地图，说明幕后的情况。我正在谈论框架的构建块及其最基本的功能。

• Ext.Component


• Ext.Element


• DOM.Element


• DOM.Node（？）


• CompositeElement（？）


• 无论什么（？）

上述每一个我想知道：

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




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




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




4. 如何相互识别：找到DOM.Element知道其Ext.Component，找到Ext.Compo不了解其DOM.Element等。




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

我正在寻找一个有条不紊，逻辑上清晰的布局，每个应该如何使用和预期的行为。我也希望所描述的功能可以分组在相应的类别，例如很高兴看到互补方式 .up（）和 .down（）按字母顺序排列页面。当然链接和示例（官方文档缺乏如此严重）也欢迎！

解决方案

您可以从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/#!/guide/components

Ext.Element vs DOM元素

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

例如，使用此HTML标签：

 < div id =myDiv>我的内容< / 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

其他

您可以使用 getEl从组件获取 Ext.Element （）方法：

  var myComponent = Ext.create（'Ext.Component'，{html ：'my component'}）; 
 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屋！