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

Question

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

假设我是这样开始的：

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

而且我需要进入文本字段或按钮，除了打开文件并浪费宝贵的时间来推断 components/elements 的排列方式之外，专业人士浏览层次结构的方式是什么？

非常感谢您的帮助。

丹麦

Answer 1

嗯，这个问题很大，不好回答，因为它还取决于你选择的架构/模式，mvc、mvvm 等。

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

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

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

回购：

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

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

EXTJS 6.x through 4.x view the layering of the components graphically or otherwise

javascript

dom

extjs6