Question

I have a component I created that extends Ext.window.Window, I’ve given it an alias of ‘widget.customereditor’. Once I’ve created an shown an instance of this component both of the following pieces of code seem to be getting a reference to the same thing:

Ext.ComponentQuery.query('customereditor')[0];
Ext.widget('customereditor');

The problem is when I try to execute the close method on the returned object. So the following does work and closes the window:

Ext.ComponentQuery.query('customereditor')[0].close();

While this does not work:

Ext.widget('customereditor').close();

I’m wondering what the difference is between the two ways of querying?

Answer 1

After reading the API docs I found the answer. It turns out that Ext.widget does not actually query for an existing instance of a component in the DOM but instead creates new instances of components by their xtype. Ext.ComponentQuery should be used to find existing instances of components.