Results 1 to 5 of 5

Thread: [4.1.1 GA] Grid selection key navigation doesn't work if select programmatically

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default [4.1.1 GA] Grid selection key navigation doesn't work if select programmatically

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.1.1 GA

    Browser versions tested against:
    • Any

    Description:
    • Grid selection key navigation doesn't work if select a row programmatically using
      Code:
      Ext.getCmp("GridPanel1").getSelectionModel().select(0);
      I guess a row is not focused and try
      Code:
      Ext.getCmp("GridPanel1").getView().focusRow(0);
      after selection, but it also doesn't causes navigation to be working. But this
      Code:
      Ext.getCmp("GridPanel1").getView().focusCell({
          column: 0,
          row: 0
      });
      helps. But this method is marked as "private" in the Docs. Anyways, I expect navigation working just after .select(0). Or, at least, after .focusRow(0).

    Steps to reproduce the problem:
    • Run the sample
    • Click the Button
    • Press the Arrow Down key.

    The result that was expected:
    • The selection moves down.

    The result that occurs instead:
    • The selection doesn't move.

    Test Case:

    Code:
    <html>
    <head>
        <title>SelectionModel key navigation</title>
    
        <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
        <script type="text/javascript" src="../ext-all-debug.js"></script>
        <script type="text/javascript" src="../locale/ext-lang-pt_BR.js"></script>
    
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.create("Ext.grid.Panel", {
                    id: "GridPanel1",
                    renderTo: Ext.getBody(),
                    store: {
                        fields: [{
                            name: "test1"
                        }, {
                            name: "test2"
                        }, {
                            name: "test3"
                        }],
                        autoLoad: true,
                        proxy: {
                            data: [
                                ["test1", "test2", "test3"],
                                ["test4", "test5", "test6"],
                                ["test7", "test8", "test9"]
                            ],
                            type: 'memory',
                            reader: {
                                type: "array"
                            }
                        }
                    },
                    columns: {
                        items: [{
                            dataIndex: "test1",
                            text: "Test1"
                        }, {
                            dataIndex: "test2",
                            text: "Test2"
                        }, {
                            dataIndex: "test3",
                            text: "Test3"
                        }]
                    }
                });
                Ext.create("Ext.button.Button", {
                    renderTo: Ext.getBody(),
                    text: "Select",
                    handler: function (item, e) {
                        Ext.getCmp("GridPanel1").getSelectionModel().select(0);
    
                        // This doens't causes navigation working.
                        //Ext.getCmp("GridPanel1").getView().focusRow(0);
                        
                        // But this does cause.
                        
                        /*
                        Ext.getCmp("GridPanel1").getView().focusCell({
                            column: 0,
                            row: 0
                        });
                        */
                    }
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>


    HELPFUL INFORMATION


    Possible fix:
    • Just a workaround - call
      Code:
      Ext.getCmp("GridPanel1").getView().focusCell({
          column: 0,
          row: 0
      });
      after selecting a row.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    I can reproduce in 4.1.1 but the code for 4.1.2 this works.
    Mitchell Simoens @LikelyMitch

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

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Thanks for the update, Mitchell!

    I will wait 4.1.2 release to test.

    Could you clarify will I need to use .select() only? Or with .focusRow() together?

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Just select() will do it.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Ok, thanks, Evan!

Posting Permissions

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