1

In order to navigate through the elements/components hierarchy of EXTJS , I need to see what is up and what is down from any point like an element. Too often I go the wrong way and it takes me hours to figure out the path of a component/element (from to). Opening up the debugger and doing it through dom is abominable. Is there a nice utility or way in EXTJS to xray view the hierarchy in some way? And if you are sure that there is not, please let me know how you do it.

Let's say I start this way:

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

And I need to get to a textfield or button, what is the pro's way of navigating the hierarchy, other than opening up the files and wasting precious time deducing how the components/elements are arrayed?

Many thanks for your help.

DK

DeKoss
  • 437
  • 3
  • 19

1 Answers1

2

Well, this question is quite big and not easy to answer because it depends on the architecture / pattern you choose as well, mvc, mvvm, etc..

I really like to use viewcontrollers to access the components using the reference config object or itemId, described here:

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

Beside that you can install in Chrome the AppInspector plugin from Senchalabs, this can help you navigating through the component tree, stores and more.

Repo:

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

Chrome store:

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

Can you use beside that the .up and .down selector in extjs: extjs using up and down methods

Community
  • 1
  • 1
hwsw
  • 2,596
  • 1
  • 15
  • 19