Ext.tree & Ext.NestedLayoutPanel: No Keyboard Navigation

[oxi]

When I put a Ext Tree into an Ext Nested Layout, then the tree looses the ability to be navigated by keys. I tested this with ext-1.0-alpha2 and IE7.


...
innerLayout.add('center', new Ext.ContentPanel('inner'));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout), ...);
...
tree = new Ext.tree.TreePanel('inner', ...)
...

[jack.slocum]

Does the tree have the focus?

[oxi]

I'm trying to place two trees in two different contentpanels in a nested borderlayout. I didn't have any problems with keyboard navigation using contentpanels in a normal borderlayout with the same code for the tree's. That's why I believe it's a bug.

However, I can't tell if the tree's are focused properly. I didn't manage to detect if a tree has focus or not. I don't even know how to focus it by code.

Could someone please give me an example how to focus a tree by code and how to detect if it really was focused?

[oxi]

I managed to detect the focus of a text box...


var element = Ext.DomHelper.append(document.body, {tag:'input', type:'text'}, true);
element.addListener('focus', function(){alert('ok')});


...but that didn't work for an Ext.tree:


...
var element = Ext.DomHelper.append(document.body, {tag:'div', id:'tree'}, true);
element.addListener('focus', function(){alert('ok')});
var tree = new Ext.tree.TreePanel(element, {...

[oxi]

I believe it's an IE or IE7 Bug. As soon as I specify the tree container div to be a float it works.

That means if you have a tree in a div an id but no further attributes, you cannot focus it in IE7, that means you cannot use Key navigation.

I tested it with firefox and the problem didn't occur.

[jack.slocum]

Try adding the css attribute zoom:1 - it is the ie cure all. ;)