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