ExtJS 4 按钮下一步

Question

问题可能很简单，但我找不到正确的答案。

我有一个只有四个按钮的面板。只是带有按钮的 vbox。现在我想选择并按下这个按钮，不仅可以通过鼠标单击，还可以通过键盘。所以我使用了 Ext.KeyMap 并抓住了我想要的每一个键：ENTER、TAB、DOWN 和 UP。但是我找不到在此按钮之间移动焦点的简单方法。

例如我专注于第一个按钮，按向下键，我想专注于第二个按钮。没门。我试过了

but1.down('button[action=next]').focus(false, 100))

但它不能工作。请善待提示。

---

好吧，我能说什么，非常感谢你——它显然有效。

我不知道要使用 KeyNav。 但它在这样一个简单的例子中工作我的情况有点复杂，我问这个问题只是简化了我的情况。所以这个菜单是我应用程序中的第二个屏幕，它的构造方式如下：

PANEL
    Panel1
        Label1
        Button 1
        Button 2
        Button 3
    Panel2
        Label2
        Button 4
        Button 5
    Panel3
        Label3
        Button 6
        Button 7
    Button 8

并且每个用户都可以看到（面板在开始时隐藏）并使用此结构的一部分（例如 Panel1、3 和 Button 8）。我在前一步（登录步骤）决定了它，我只在定义的容器中为他显示用户菜单：

    Ext.define('Gromel.view.Menu', {
        extend: 'Ext.container.Container',
        requires:[
            'Ext.tab.Panel',
            'Ext.layout.container.Border',
            'Ext.form.Label',
            'Ext.form.Panel'
        ],

        xtype:      'app-menu',

        fullscreen: true,
        layout:     'fit',
...

我将您的代码放在 PANEL 级别，它几乎可以正常工作。我对上述项目使用以下默认定义：

defaults: {
    margin:  '0 0 10 0',
    baseCls: 'x-btn-default-large',
    cls:     'cap-btn',
    style:   'font-size:18px;text-align: center',
    height:  40,
    width:   '50%',
// yours:
    handler: function () {
        this.up('panel').activeButton = this.activeIndex;
    }
}

所以我将您的 cls 更改方法修改为：

button[method]('x-focus x-btn-focus x-btn-default-large-focus')

并且您的程序正在运行。

我现在无法解决的问题是：

• 正如您在与按钮相同的级别上看到的，我有标签，但我不知道如何绕过它们；

• 更重要的是 - 我只想在菜单面板上运行此过程，而不是在登录面板和其余部分（在我的结构中更深），但这是全局的，所以如果我在登录面板上按 ENTER，我会看到下一个菜单的效果控制板;我用以下方式替换了 ENTER 效果（我想在菜单中的每个按钮上按 ENTER 并运行不同的按下事件）：

  case e.ENTER: butt.fireEvent('click', butt);休息;

所以如果对你来说不是很多，请多多指教。

Answer 1

尝试使用 ExtJS KeyNav。

KeyNav 为规范化的键盘导航提供了一个方便的包装器。 KeyNav 允许您将导航键绑定到将在按下键时调用的函数调用，从而为任何 UI 组件实现自定义导航方案提供了一种简单的方法。

如你所说

我有一个只有四个按钮的面板。

我已经解决了这个问题，我创建了一个小的 sencha fiddle 演示。它将向您展示如何工作。我希望这能帮助您解决问题。

你也可以参考这个Key Navigation Sample

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: 'Button Example with keyNav',
    margin: 10,
    bodyStyle: {
        'border-width': '2px'
    },
    layout: {
        type: 'vbox',
        align: 'center'
    },
    defaults: {
        xtype: 'button',
        height: 50,
        width: '70%',
        margin: '20 0',
        handler: function () {
            this.up('panel').activeButton = this.activeIndex;
        }
    },
    items: [{
        text: 'My button 1',
        activeIndex: 0
    }, {
        text: 'My button 2',
        activeIndex: 1
    }, {
        text: 'My button 3',
        activeIndex: 2
    }, {
        text: 'My button 4',
        activeIndex: 3
    }],
    listeners: {
        afterrender: function () {
            var panel = this;
            panel.keynav = Ext.create('Ext.util.KeyNav', {
                target: Ext.getBody(),
                scope: panel,
                up: panel.doFocusOnButton,
                down: panel.doFocusOnButton,
                enter: panel.doFocusOnButton,
                tab: panel.doFocusOnButton
            });
            //Remove cls on panel click
            panel.el.on('click', function () {
                this.doAddRemoveCls('removeCls');
            }, panel)
            panel.focus();
        }
    },

    /*
     * Common event will fire on key : ENTER, TAB, UP, DOWN
     * @param {Ext.EventObject} e Just as Ext.Element wraps around a native DOM node
     */
    doFocusOnButton: function (e) { //{ http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.EventObject }
        var panel = this,
            button = '',
            totalItem = panel.items.length - 1;
        if (Ext.isDefined(panel.activeButton) == false) {
            panel.activeButton = 0;
        } else {
            this.doAddRemoveCls('removeCls');
            switch (e.getKey()) {
            case e.ENTER:
            case e.DOWN:
            case e.TAB:
                panel.activeButton++;
                if (panel.activeButton > totalItem) {
                    panel.activeButton = 0;
                }
                break;
            case e.UP:
                panel.activeButton--;
                if (panel.activeButton < 0) {
                    panel.activeButton = totalItem;
                }
                break;
            }
        }
        this.doAddRemoveCls('addCls');
    },
    //This function will add or remove cls..
    doAddRemoveCls: function (method) {
        var panel = this,
            index = panel.activeButton,
            button = Ext.isDefined(index) ? panel.down('[activeIndex=' + index + ']') : null;

        if (button) {
            button[method]('x-focus x-btn-focus x-btn-default-small-focus')
        }
    }
});