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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,894
    Vote Rating
    1327
      0  

    Default

    Just tried your test in FF 16 and it's working for me solidly every time.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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
  •