javascript - EXTJS 6.x 到 4.x 以图形方式或其他方式查看组件的分层

Question

为了浏览 EXTJS 的元素/组件层次结构，我需要像元素一样从任何点查看什么是向上的，什么是向下的。我经常走错路，要花几个小时才能弄清楚组件/元素的路径(从到)。打开调试器并通过 dom 进行操作是可恶的。 EXTJS 中是否有一个很好的实用程序或方法来以某种方式 xray 查看层次结构？如果您确定没有，请告诉我您是如何做到的。

假设我是这样开始的:

var panel = Ext.ComponentQuery.query('panel[itemId=dateOfDeathPanel]')[0];

我需要找到一个文本字段或按钮，除了打开文件并浪费宝贵的时间来推断组件/元素的排列方式之外，专业人士浏览层次结构的方式是什么？

非常感谢您的帮助。

黑暗

Answer 1

好吧，这个问题很大而且不容易回答，因为它还取决于您选择的架构/模式，mvc、mvvm 等。

我真的很喜欢使用 viewcontrollers 来访问使用引用配置对象或 itemId 的组件，如下所述:

http://docs.sencha.com/extjs/6.0/application_architecture/view_controllers.html

---

除此之外，您还可以在 Chrome 中安装 Senchalabs 的 AppInspector 插件，这可以帮助您浏览组件树、商店等。

repo :

https://github.com/senchalabs/AppInspector/

Chrome 商店:

https://chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae

---

除此之外，你还可以使用 extjs 中的 .up 和 .down 选择器吗: extjs using up and down methods