1. #1
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    193
    Vote Rating
    24
    elgs will become famous soon enough

      0  

    Default Grid rows keyboard navigation

    Grid rows keyboard navigation


    I'm hoping to provide my users with the possibility to access the gird rows without mouse as much as possible. Now what I can do are:
    1, Use up down arrow keys navigate through a grid;
    2, Enter to pop up a window to edit this record;
    3, Fn + Delete to ask user to delete a row;


    However, what I cannot do is:
    After the user finished editing the record, the user closed the edit window. Now it's not possible to use up down arrow keys to navigate through the grid rows. A mouse click on the grid must be conducted to give the grid focus again. If I want to do the "give focus to grid" job programmatically after the edit window is closed. What should I do?


    Thanks,
    Elgs

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    193
    Vote Rating
    24
    elgs will become famous soon enough

      0  

    Default


    Anyone who has any idea about this? Thanks!!

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    193
    Vote Rating
    24
    elgs will become famous soon enough

      0  

    Default


    This thread is talking about the same question. It talks about:
    Code:
    grid.getView().select(rowIndex);

    However, seems select does not exists in the Ext.view.Table in extjs 4.2 document?

    Thanks.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    After closing the window get a reference back to the grid and do:

    Code:
    grid.view.focus()
    That will allow your user to continue with navigation.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    193
    Vote Rating
    24
    elgs will become famous soon enough

      0  

    Default


    Quote Originally Posted by slemmon View Post
    After closing the window get a reference back to the grid and do:

    Code:
    grid.view.focus()
    That will allow your user to continue with navigation.
    Thanks @slemmon, your code works!

    And I have a further question, is it possible to programmatically select a row? Seems I saw only deselect method from the Ext.view.Table, but not select? Am I missing anything? Thanks.

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Definitely. Try this:

    grid.getSelectionModel().select();
    *The select() API will give you details on what params to pass to it in order to select a given row/record.

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    193
    Vote Rating
    24
    elgs will become famous soon enough

      0  

    Default


    Now I'm trying grid.getSelectionModel().select();

    It seems
    grid.getSelectionModel().select(record) does not work, while grid.getSelectionModel().select(record.index) works. I think it's dangerous to use record.index because index is not documented in the API. I find the index property by a lot of console.log work.

    I'm using
    ext-4.2.1.744.

    Thanks,
    Elgs

  8. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    The following test case works ok for me. It gets the record at a specific index in the store and uses that record instance in the select() method. I agree - using record.index is not a good practice.

    *I'm testing in 4.2.1.883 which is the GA release. 4.2.1.744 was a beta release that should now be replaced with the stable 4.2.1.883 release

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        tbar: [{
            text: 'Select Record 2',
            handler: function () {
                grid.getSelectionModel().select(grid.getStore().getAt(1));
            }
        }]
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    193
    Vote Rating
    24
    elgs will become famous soon enough

      0  

    Default


    Thanks for the code, @slemmon. I confirm that your code works in both 4.2.1.744 and 4.2.1.883 (883 has major problem on focus, so we don't use that version).

    I changed the code a bit, and it doesn't work. This is my real situation:
    Code:
    handler: function () {
        var r = grid.getStore().getAt(1);
        store.load();
        grid.getSelectionModel().select(r);
    }
    I need to find out the record which the use was working on before a store reload. Now, if I change from select(r) to select(r.index), it works.

    Is there any better way to achieve so? I mean, to avoid using the private index property. I think using the index internally actually depends on the order of records being unchanged. Thanks.

  10. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    If your data / model has a unique id field (the model's idProperty defaults to 'id') then the gridview will attempt to re-select any records that were selected before the load operation - automatically.

    If you need to manage the selection yourself using the index (trusting that the data returned is the same position as in the view prior to the reload and that you haven't filtered the view and not the server data, etc.) you can do something like:

    Code:
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone', 'id'],
        proxy: {
            type: 'ajax',
            url: 'data/json.json',
            reader: {
                type: 'json',
                root: 'items'
            }
        },
        autoLoad: true
    });
    
    
    
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        tbar: [{
            text: 'Select Record 2',
            handler: function () {
                var store = grid.getStore(),
                    selModel = grid.getSelectionModel(),
                    i;
    
    
                selModel.select(grid.getStore().getAt(1));
                i = store.indexOf(selModel.selected.first());
    
    
                store.load({
                    callback: function () {
                        grid.getSelectionModel().select(i); 
                    }
                });
            }
        }]
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1