Component Query - Too many instances?????

[worthlutz]

I have defined a top level class:


Ext.define('MyApp.view.MyClass', {
extend: 'Ext.tree.panel',
alias: 'widget.mytreepanel'
...
});


I then use this view as such:


Ext.define('MyApp.view.MyView', {
extend: 'Ext.tab.panel',
...
items: [
{
xtype: 'panel',
title: 'Tree1',
items: [
{
xtype: 'mytreepanel',
newAttr: 'treepanel'
}
]
},{
xtype: 'panel',
title: 'Tree2',
items: [
{
xtype: 'mytreepanel',
newAttr: 'treepanel'
}
]
}
],
...
});

Now when I try to gather all of the tree panels with


var trees = Ext.ComponentQuery.query('mytreepanel');

console.log('number of trees = ' + trees.length);


I get 3 trees. I only expected the 2 that were in my tab panel. Is this the expected result?

If I give an additional attribute ('newAttr' above) to the two which are used in the tab panel when they are instantiated, I can query with that attribute and get only those two.


var trees = Ext.ComponentQuery.query('mytreepanel [newAttr="treepanel"]');

console.log('number of trees = ' + trees.length);

An explanation of what I'm seeing by someone who understands better that I would be appreciated.

Thanks,
Worth

[friend]

Try changing your class definition's alias to look like this:



Ext.define('MyApp.view.MyClass', {
extend: 'Ext.tree.panel',
alias: 'widget.mytreepanel'
<...>
});


Note the 'widget' prefix on the alias.

[worthlutz]

Try changing your class definition's alias to look like this:



Ext.define('MyApp.view.MyClass', {
extend: 'Ext.tree.panel',
alias: 'widget.mytreepanel'
<...>
});


Note the 'widget' prefix on the alias.

You've got good eyes! But that was a typo on my part. My actual code has the "widget" part. It won't work without it. I've fixed it above.

Worth

[skirtle]

What happens if you run the component query without creating the trees in the tab panel? At what point does this mysterious extra tree turn up?

Are there any clues if you inspect this extra tree in the debugger, such as a rendered el or an ownerCt?

Cut back the example, tweak it in various ways. Try to understand exactly what scenarios cause the extra tree.

The highly scientific approach of poking it with a stick goes a long way to understand things like this.

[worthlutz]

...
Are there any clues if you inspect this extra tree in the debugger, such as a rendered el or an ownerCt?

Cut back the example, tweak it in various ways. Try to understand exactly what scenarios cause the extra tree.

The highly scientific approach of poking it with a stick goes a long way to understand things like this.

Thanks for poking me with the stick! :D

My test case is way to complex but I'm trying to understand the interactions between lots of parts. Your comment on ownerCt (it did not have one) clued me in to checking an unrelated area of the code where I found sometime in the past I had created an instance to check out something. Forgot to remove it.

Thanks again,
Worth