Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default [4.1.0] TreePanel not fires keyboard events

    [4.1.0] TreePanel not fires keyboard events


    When using TreePanel with treeviewdragdrop plugin, no keyboard events (keyup, keydown, keypress) are fired and standard tree behavior (such as expand with Right key, collapse with Left key) also does not work.

    After treeviewdragdrop plugin remove from TreePanel all events are fired.

    You can look at http://dev.sencha.com/deploy/ext-4.1...e/reorder.html for sample exmaple

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,949
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    How do I reproduce it? I ran the sample and can navigate with the keys as I'd expect

    http://screencast.com/t/jaQR7TXfpU
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default


    Steps to reproduce:
    open FireFox 13.0.1 - 14.0.1, Chrome 13
    go to url http://dev.sencha.com/deploy/ext-4.1...e/reorder.html
    try to use Right, Left keys to expand, collapse node

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1.0
    Browser versions tested against:
    • FireFox 13.0.1
    • FireFox 14.0.1
    • Chrome 13
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • I'm working with TreePanel now. And want to have standard keyboard support (such as expand, collapse using arrow keys). Also I want to have nodes drag&drop functionality.
    • When I use TreePanel without D&D support, Left/Right keys are working great
    • After including treeviewdragdrop plugin to TreePanel, tree manipulation using keyboard is not working.
    Steps to reproduce the problem:The result that was expected:
    • Node expands on Right key, collapses on Left key
    • When key is pressed events are fired
    The result that occurs instead:
    • Left\Right keys do not work
    • keyup, keydown, keypress events are not fired
    Test Case:
    Code:
        Ext.require([
        'Ext.tree.*',    'Ext.data.*',    'Ext.tip.*']);Ext.onReady(function() {    Ext.QuickTips.init();        var store = Ext.create('Ext.data.TreeStore', {        proxy: {            type: 'ajax',            url: 'get-nodes.php'        },        root: {            text: 'Ext JS',            id: 'src',            expanded: true        },        folderSort: true,        sorters: [{            property: 'text',            direction: 'ASC'        }]    });    var tree = Ext.create('Ext.tree.Panel', {        store: store,        viewConfig: {            plugins: {                ptype: 'treeviewdragdrop'            }        },        renderTo: 'tree-div',        height: 300,        width: 250,        title: 'Files',        useArrows: true,        dockedItems: [{            xtype: 'toolbar',            items: [{                text: 'Expand All',                handler: function(){                    tree.getEl().mask('Expanding tree...');                    var toolbar = this.up('toolbar');                    toolbar.disable();                                        tree.expandAll(function() {                        tree.getEl().unmask();                        toolbar.enable();                    });                }            }, {                text: 'Collapse All',                handler: function(){                    var toolbar = this.up('toolbar');                    toolbar.disable();                                        tree.collapseAll(function() {                        toolbar.enable();                    });                }            }]        }]    });});
    HELPFUL INFORMATION
    See this URL for live test case: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/reorder.html

    Debugging already done:
    • Simple debugging showed that problem must be in ViewDragZone class
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Win7

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default


    I have provided all information I can.
    What can I do to have your response about possible solutions?

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,949
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Did you look at the screencast I posted? I'm navigating exactly that example using the keyboard. I'm not sure how to go about reproducing it.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default


    Yes, I have seen screencast but it is not helpful because on my PC nothing works.

    But, there are good news - in ExtJs 4.1.1 TreePanel manipulation with keyboard is working as expected.

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Default


    Hi,

    I am working on same requirement, i am trying to delete the node from the treepanel using keyboard delete button, but is not firing.

    I am using ExtJS 4.1

    Any help would be appreciated.

    Regards,
    MR

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default


    murali3,
    I'm assuming you're using ExtJs 4.1.0. Because in version 4.1.1 everything works as expected for me (without any changes to my code).
    If you have 4.1.1 version and DEL key is not working then I dont know what to do.