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);  
        }
    }
}]

Answer 2

是的@sra说，使用类似的东西：

Ext.getCmp('IdOfNextButton').focus();

或者更好地从您的表单中使用其中一种up / down方法通过特定类找到它而不是依赖于Id。

Answer 3

如果可以使用它，更好的方法是使用Ext.window.Window的defaultFocus配置。来自docs：

defaultFocus：String / Number / Ext.Component

指定在关注此窗口时接收焦点的Component。

这可能是以下之一：


页脚按钮的索引。

后代Component的id或Ext.AbstractComponent.itemId。

A Component。


自2004年以来可用

将自动对焦设置为下一个按钮

3 个答案: