dom – ExtJS：组件VS元素VS其他

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

> Ext.Component
> Ext.Element
> DOM.Element
> DOM.Node(？)
> CompositeElement(？)
>还有什么(？)

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

>如何选择：按ID,按类,通过父,查找(或子OR或查询或选择？WTF),兄弟姐妹,ComponentQuery,DOM查询,CSS查询等.
>如何在树中操作：创建,追加,前置,插入此兄弟之后,移动到该父级,删除,销毁等.
>如何操作屏幕：显示,隐藏,淡入淡出,滑动,上移,下移,更改大小等.
>如何识别彼此相关：找到知道其Ext.Component的DOM.Element,找到知道其DOM.Element等的Ext.Component.
>它们之间的依赖关系：如果DOM.Element的Ext.Component被隐藏/销毁/更改/移动会发生什么,如果Ext.Component的Ext.Element被隐藏/销毁/更改/移动,会发生什么？等等

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

解决方法

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

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

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

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

（编辑：鞍山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!