Results 1 to 4 of 4

Thread: Grid keyboard navigation and editing

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2010
    Posts
    100
    Vote Rating
    9
      0  

    Default Grid keyboard navigation and editing

    Hi!

    I am extending GridPanel to allow users to use up and down arrow keys to move to the cell above or below within column and edit them. In Chrome everything works fine.

    In Firefox and IE moving and editing between numberfields work flawlessy but textfield editing fails randomly. I can see editor showing briefly but it closes immediately.

    I can't use cell selection model because grid must have possibility to select multiple rows for batch processing.

    Any idea why editingPlugin.startEditByPosition fails in textfields some times in IE and Firefox?

    I am using Ext JS 4.1.1a.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
        <script>
    
    
            Ext.onReady(function() {
            
                Ext.define('DataEntryGrid', {
                    extend: 'Ext.grid.Panel',
                    alias: 'widget.dataentrygrid',
                
                    onRender: function() {
                        this.callParent(arguments);
                        this.addKeyboardNavigationToCellEditors();
                    },
                
                    
                    addKeyboardNavigationToCellEditors: function() {
                        var columns = this.columns;
                        for(var i=0; i<columns.length; i++) {
                            console.log(columns[i]);
                            if (columns[i].getEditor()) {
                                var editor = columns[i].getEditor();
                                editor.addListener('specialkey', this.cellEditorNavigationKey, this);
                            }
                        }
                    },
                
                    cellEditorNavigationKey: function(component, el) {
                
                        var selectedRecord = this.getSelectionModel().getSelection()[0];
                        var row = this.store.indexOf(selectedRecord);
                        var rowCount = this.getStore().getCount();
                        var col = this.editingPlugin.activeColumn.getIndex();
                        if (el.keyCode == el.UP) {
                            el.stopEvent();
                            console.log('UP');
                            if (row-1<0) return;
                            this.editingPlugin.startEditByPosition({row: (row - 1), column: col});
                            
                        } else if (el.keyCode == el.DOWN) {
                            el.stopEvent();
                            console.log('DOWN');
                            if (row+1>=rowCount) return;
                            this.editingPlugin.startEditByPosition({row: (row + 1), column: col});
                        }
                    
                    }
                
                });
    
    
                
            
    
    
                Ext.create('Ext.data.Store', {
                    storeId:'store',
                    fields: ['name', 'age'],
                    data: {
                        'persons':[
                            {"name":"Lisa", "age":10},
                            {"name":"Bart", "age":12},
                            {"name":"Homer","age": 44},
                            {"name":"Marge", "age": 42}
                        ]
                    },
    
    
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'persons'
                        }
                    }
    
    
                });
                
                var sm = Ext.create('Ext.selection.CheckboxModel', {
                    checkOnly:true,
                    enableKeyNav: false
                });
    
    
                Ext.create('DataEntryGrid', {
    
    
                    title: 'Data entry test',
                    store: Ext.data.StoreManager.lookup('store'),
                    selModel: sm,
                    columns: [
    
    
                        {
                            header: 'Name', 
                            dataIndex: 'name', 
                            editor: {
                                xtype: 'textfield',
                                enableKeyEvents: true
                            }
    
    
                        },
    
    
                        {
                            header: 'age',
                            dataIndex: 'age',
                            editor: {
                                xtype: 'numberfield',
                                enableKeyEvents: true,
                                allowDecimals: false,
                                minvalue: 0,
                                maxValue: 199,
                                hideTrigger: true,
                                keyNavEnabled: false
                            }
                        }
    
    
                    ],
    
    
                    plugins: [
    
    
                        Ext.create('Ext.grid.plugin.CellEditing', {
                            clicksToEdit: 1
                        })
    
    
                    ],
    
    
                    height: 200,
    
    
                    width: 400,
    
    
                    renderTo: Ext.getBody()
    
    
                });
    
    
            });
    
    
        </script>
    
    
    </head>
    
    
    <body>
    
    
    
    
    
    
    </body>
    
    
    </html>

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1381
      0  

    Default

    Just tried your test in FF 16 and it's working for me solidly every time.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    19
    Vote Rating
    0
      0  

    Default

    It's been a while... did you find any solution for your problem?I'm experiencing the same on IE, FF and Chrome

  4. #4
    Sencha User
    Join Date
    Apr 2017
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by tzalberto View Post
    It's been a while... did you find any solution for your problem?I'm experiencing the same on IE, FF and Chrome
    Hey Hi,

    It's been while now , did you find solution to this problem? If yes, could you help by posting what needs to be done.

    Regards,
    Likhit

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •