PDA

View Full Version : TreePanel keyboard navigation after render



vandervagos
30 Jul 2013, 7:12 AM
When I create a window containing a TreePanel, I cannot navigate directly with the keyboard.
I have to click first to a node. I tried to gain focus after render in various ways as you can see.

Any ideas?


Ext.create('Ext.window.Window', { layout: 'fit',
width: 280,
height: 400,
items: {
xtype: 'category-tree',
selType: 'rowmodel',
listeners : {
afterrender:function(tree, eOpts){
tree.getSelectionModel().select(tree.getRootNode().firstChild);
tree.selectPath(tree.getRootNode().firstChild.getPath());
tree.getView().focusRow(tree.getRootNode().firstChild, true);
tree.getView().focus();
tree.getView().select(tree.getRootNode().firstChild);
}
}
}
}).show();


Ext.define('PiggybankReports.view.CategoryTree', { extend: 'Ext.tree.Panel',
requires:[
],

xtype: 'category-tree',
title: 'Select category',
store: 'Categories',
rootVisible: false,
lines: true,
loadMask: true,
useArrows: true,
hideHeaders: true,
columns: [{ xtype: 'treecolumn', text: 'name', dataIndex: 'name', flex: 1 }]
});

tobiu
30 Jul 2013, 7:22 AM
1)

make sure that your tree items are already rendered at this point (e.g. use console.log to log the first tree node). In case the node is not rendered yet, delay the listener a bit like:



listeners : {
afterrender:function(tree, eOpts){
...
},
delay: 200
}


2)

try to set the focus on a real node, not on the view itself, like:


tree.getRootNode().firstChild.focus();


or



tree.getRootNode().firstChild.getEl().focus();

vandervagos
30 Jul 2013, 8:46 AM
2) Are not valid expressions.

1) This works for me!


Ext.create('Ext.window.Window', {
layout: 'fit',
width: 280,
height: 400,
items: {
xtype: 'category-tree',
selType: 'rowmodel',
listeners : {
afterrender:function(tree, eOpts){
console.log('afterrender');
tree.getView().focusRow(tree.getRootNode().firstChild, true);
},
delay: 100
}
}
}).show();