How to get the event when selecting column with TAB ?

[sasklacz]

I have a TreePanel with some columns defined. One of them is a 'templatecolumn' which shows some colored div. Now I'd like to catch the event, when I'm moving between the columns using `TAB` button (as seen on the screen. I've selected 'predecessors' column and after pressing TAB I'm in the Color column), so that on entering the templatecolumn I can change the html, as right now my editor input field is shown after the div. I've tried attaching all listeners I've found in the docs, but only click seems to work here. Any ideas how to solve this ?

{
    header: 'Color',
    xtype: 'templatecolumn',
    width: 50,
    tpl: '<div class="color-column-inner" style="background-color:#{TaskColor}">&nbsp;</div>',
    listeners: {
        click : function(panel, el, a, b, event, record) {
            console.log('click');
        },
        keypress: function () {
            console.log('keypress');
        },
        keydown: function () {
            console.log('keydown');
        },
        beforestartedit: function () {
            console.log('beforestartedit');
        },
        focus: function() {
            console.log('focus');
        },
        containerkeydown: function() {
            console.log('containerkeydown');
        }
    }
}

Attaching two images - html structure when the columns are rendered and a screenshot of what it looks like now :

column_html.png


columns.png

[vietits]

Is your grid plain or enable to edit with celleditor or roweditor? If it is plain, how can you TAB between columns? If it is a editable grid then you should listen key events from cell editor. See here as an example http://www.sencha.com/forum/showthre...able-grid-cell, post #3.