title: EXTJS 6.x through 4.x view the layering of the components graphically or otherwise
body: <p>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. </p>
  
  <p>Let's say I start this way:</p>
  
  <pre><code>var panel = Ext.ComponentQuery.query('panel[itemId=dateOfDeathPanel]')[0];
  </code></pre>
  
  <p>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?</p>
  
  <p>Many thanks for your help.</p>
  
  <p>DK</p>