Question

我有以下网格声明：

quickSearchGrid = Ext.create('Ext.grid.Panel', {
        height: 500,
        collapsible: true,
        .....

然后，我上面有输入元素：

<input type="text" id="quickSearch" value="Search" style="height: 25px; width: 100%;" />

我想传递特定的击键 - Up，Down，PgUp，PgDown等从输入到网格。因此，当用户将焦点放在文本字段中时，他将能够使用键盘在网格中导航。

我正在尝试创建自己的KeyNav：

var nav = Ext.create('Ext.util.KeyNav', Ext.get('quickSearch'), {
    scope: Ext.get('quickSearch'),
    down: function (e) {
        console.log(e)
        quickSearchGrid.fireEvent('keydown', quickSearchGrid, e)
    }
});

正在调用函数（它写入控制台）但网格没有反应。

Answer 1

找到可以使用的解决方法。在extJs中创建文本输入，而不是在html中声明它：

var quickSearch = Ext.create('Ext.form.field.Text', {
    id: 'quickSearch',
    name: 'quickSearch',
    fieldLabel: 'QuickSearch',
    allowBlank: true
});

然后，您可以通过选择索引1高于/低于当前所选记录的记录，将其用于带箭头的网格导航：

var grid = quickSearchGrid;
var view = quickSearchGrid.getView();

var nav = Ext.create('Ext.util.KeyNav', Ext.getDoc(), {
    down: function(e) {
        var selectionModel = grid.getSelectionModel();
        var select = 0; // select first if no record is selected
        if ( selectionModel.hasSelection() ) {
            select = grid.getSelectionModel().getSelection()[0].index + 1;
        }
        view.select(select);
        quickSearch.focus(); // to get focus back to the input
    },
    up: function(e) {
        var selectionModel = grid.getSelectionModel();
        var select = grid.store.totalCount - 1; // select last element if no record is selected
        if ( selectionModel.hasSelection() ) {
            select = grid.getSelectionModel().getSelection()[0].index - 1;
        }
        view.select(select);
        quickSearch.focus(); // to get focus back to the input
    },
});

Answer 2

使用ExtJS 6，使用bufferedRenderer.scrollTo()方法模拟导航非常简单：

在这里，我创建KeyNav，但您可以将其重写为纯Javascript / jQuery：

quickSearchKeyNav = Ext.create('Ext.util.KeyNav', Ext.get('quickSearch'), {
        scope: Ext.get('quickSearch'),
        up: function (e) {
            quickSearchGrid.view.bufferedRenderer.scrollTo(
              quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) - 1,
              true);
        },
        pageUp: function (e) {
            var rowsOnScreen = quickSearchGrid.getNavigationModel().getRowsVisible();
            quickSearchGrid.view.bufferedRenderer.scrollTo(
              quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) - rowsOnScreen,
              true);
        },
        pageDown: function (e) {
            var rowsOnScreen = quickSearchGrid.getNavigationModel().getRowsVisible();
            quickSearchGrid.view.bufferedRenderer.scrollTo(
              quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) + rowsOnScreen,
              true);
        },
        down: function (e) {
            quickSearchGrid.view.bufferedRenderer.scrollTo(
              quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) + 1,
              true);
            }
    });

ExtJS：如何将键击从文本字段传递给Grid？

2 个答案: