如何在EXTJS表单中控制Tab键光标横向移动

方法一：通过tabIndex属性指定Tab顺序 #

这是最直接的实现方式，给每个表单字段设置tabIndex属性，按照横向排列的顺序赋值递增的数字，Tab键就会严格遵循你设定的顺序跳转。

比如用table布局实现三列横向排列的表单，配置示例：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 3 // 定义三列横向布局
    },
    items: [
        { xtype: 'textfield', fieldLabel: '第一行字段1', tabIndex: 1 },
        { xtype: 'textfield', fieldLabel: '第一行字段2', tabIndex: 2 },
        { xtype: 'textfield', fieldLabel: '第一行字段3', tabIndex: 3 },
        { xtype: 'textfield', fieldLabel: '第二行字段1', tabIndex: 4 },
        { xtype: 'textfield', fieldLabel: '第二行字段2', tabIndex: 5 },
        { xtype: 'textfield', fieldLabel: '第二行字段3', tabIndex: 6 }
    ]
});

该方式适合布局固定的场景，配置简单，无需额外事件处理。

方法二：监听Tab键事件自定义跳转逻辑 #

如果表单布局动态变化，或者需要更灵活的跳转控制，可以通过监听keydown事件，阻止默认Tab行为，手动指定下一个聚焦的字段。

示例代码（基于table布局）：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 3
    },
    items: [
        { xtype: 'textfield', fieldLabel: '第一行字段1' },
        { xtype: 'textfield', fieldLabel: '第一行字段2' },
        { xtype: 'textfield', fieldLabel: '第一行字段3' },
        { xtype: 'textfield', fieldLabel: '第二行字段1' },
        { xtype: 'textfield', fieldLabel: '第二行字段2' },
        { xtype: 'textfield', fieldLabel: '第二行字段3' }
    ],
    listeners: {
        keydown: function(panel, e) {
            if (e.getKey() === e.TAB) {
                e.preventDefault(); // 阻止默认纵向跳转行为
                var activeField = panel.getActiveItem();
                var allFields = panel.items.items;
                var currentIdx = allFields.indexOf(activeField);
                var colCount = panel.layout.columns;
                var nextIdx;

                if (!e.shiftKey) {
                    // 正向Tab：优先横向跳转，当前行末尾则跳至下一行开头
                    nextIdx = currentIdx + 1;
                } else {
                    // 反向Shift+Tab：优先横向回跳，当前行开头则跳至上一行末尾
                    nextIdx = currentIdx - 1;
                }

                // 确保索引在有效范围内
                if (nextIdx >= 0 && nextIdx < allFields.length) {
                    allFields[nextIdx].focus();
                }
            }
        }
    }
});

注意事项 #

• 先确保表单采用横向排列的布局（比如table、hbox或column布局），否则横向跳转逻辑会和视觉布局脱节。
• 如果使用column布局，每个column内的字段需要按横向顺序调整tabIndex，或者在事件处理中对应修改索引计算逻辑。

内容的提问来源于stack exchange，提问作者Febin