extjs - 在下一个按钮上设置自动对焦

Question

我在 extjs 中有向导，我在其中放置下一步、后退和取消按钮。根据要求，我需要自动将焦点设置在下一个按钮上。怎么做。

buildButtons : function() {
    return [
    {
        text:'Back',
        id:'backBtn',
        hidden:true,
        autoHeight:true,
        action: 'Back'
    },
    {
        text:'Next',
        id:'nextBtn',
        autoHeight:true,
        hidden:false,
        action: 'Next'
    },
    {
        text:'Finish',
        id:'finishBtn',
        autoHeight:true,
        hidden:false,  // Comments below line if you want finished button on each panel.
        //hidden:true,
        action: 'Finish'
    },
    {
        text:'Cancel',
        id:'cancelBtn',
        autoHeight:true,
        hidden:false,
        action: 'Cancel'
    }
    ];

}

Answer 1

假设您谈论的是最新版本 (4.1.1)

获取按钮引用并调用 focus

您应该使用按钮本身或持有按钮的组件的 afterrender 事件来执行此操作。

可以直接在 API 代码框之一中执行的示例

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    defaults: {
        xtype: 'button'   
    },
    items   : [
        {
            text: 'Next',
            action: 'next'
        },
        {
            text: 'Prev',
            action: 'prev'
        },
        {
            text: 'Cancel',
            action: 'cancel'
        }
    ],
    listeners: {
        afterrender: function(b) {
            b.down('button[action=next]').focus(false, 100);  
        }
    }
});

编辑以回答评论:

根据给定的信息，我建议您使用 buttons配置属性来放置你的按钮。在您的情况下，我建议您使用 dockedItems 数组而不是便利按钮数组。尝试以下操作:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        {
            text:'Back',
            id:'backBtn',
            hidden:true,
            autoHeight:true,
            action: 'Back'
        },
        {
            text:'Next',
            id:'nextBtn',
            autoHeight:true,
            hidden:false,
            action: 'Next'
        },
        {
            text:'Finish',
            id:'finishBtn',
            autoHeight:true,
            hidden:false,  // Comments below line if you want finished button on each panel.
            //hidden:true,
            action: 'Finish'
        },
        {
            text:'Cancel',
            id:'cancelBtn',
            autoHeight:true,
            hidden:false,
            action: 'Cancel'
        }
    ],
    listeners: {
        afterrender: function(b) {
            b.down('button[action=Next]').focus(false, 100);  
        }
    }
}]