ExtJS 4 网格焦点加导航答案

【问题标题】：ExtJS 4 grid focus plus navigationExtJS 4 网格焦点加导航
【发布时间】：2016-09-30 16:54:20
【问题描述】：

我需要开发一个包含在浮动窗口中的网格：当显示窗口时，我需要关注某一行，然后我必须使用导航键向上或向下移动。现在，我了解了如何聚焦指定的行（使用 grid.getView().focusRow(index)），但是这样做之后，我无法在网格中上下移动，就好像网格失去了焦点一样.

代码如下：

var storage = Ext.create ('Ext.data.Store', {
    fields: ['id', 'name'] ,
    data: [
        {id:0,name:'foo'} ,
        {id:1,name:'boo'} ,
        {id:2,name:'koo'} ,
        {id:3,name:'zoo'} ,
        {id:4,name:'moo'} ,
        {id:5,name:'too'} ,
        {id:6,name:'goo'} ,
        {id:7,name:'poo'} ,
        {id:8,name:'loo'} ,
        {id:9,name:'roo'} ,
        {id:10,name:'hoo'}
    ]
});

Ext.create ('Ext.grid.Panel', {
    title: 'My Grid' ,
    width: 300 ,
    height: 200 ,
    store: storage ,
    renderTo: Ext.getBody () ,

    columns: [{
        header: 'ID' ,
        dataIndex: 'id'
    } , {
        header: 'Name' ,
        dataIndex: 'name' ,
        flex: 1
    }] ,

    listeners: {
        afterlayout: function (grid) {
            var view = grid.getView ();

            view.focusRow (storage.getCount () - 1);
            view.highlightItem (view.getNode (storage.getCount () - 1));
        }
    }
});

那么，在那之后，我如何“聚焦”网格以使其可导航？

【问题讨论】：

标签： gridview extjs grid focus extjs4

【解决方案1】：

您需要选择这样的行才能使其可通过键盘导航：

grid.getView().focus();
grid.getSelectionModel().select(0); // or whatever the row index is

并在viewready 事件侦听器中执行此操作。这就是viewready 事件的用途。

显然，网格至少需要一个记录才能正常工作，您应该先检查该条件。

【讨论】：

【解决方案2】：

你可以使用focusRow()函数来解决这个问题

grid.getView().focusRow(0);

【讨论】：