ExtJS：如何将击键从文本字段传递到网格？

Question

我有以下网格声明：

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

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

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

我想将特定的击键 - 向上、向下、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 higher/lower 的记录，而不是当前选择的记录：

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：如何将击键从文本字段传递到网格？

ExtJS: How to pass keystrokes from text field to Grid?

javascript

keyboard

extjs