2

我在 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'
    }
    ];

}
4

3 回答 3

5

假设您正在谈论最新版本（4.1.1）

获取按钮引用和调用焦点

您应该使用按钮本身或持有该按钮的组件的 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);  
        }
    }
});

编辑以回答评论：

根据给定的信息，我建议您使用按钮配置属性来放置按钮。在您的情况下，我建议您使用 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);  
        }
    }
}]
于 2012-09-05T09:44:16.017 回答
1

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

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

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

于 2012-09-05T09:50:30.900 回答
1

如果可以使用，更好的方法是使用 Ext.window.Window 的 defaultFocus 配置。从文档：

defaultFocus : 字符串/数字/Ext.Component

指定一个 Component 在此 Window 获得焦点时接收焦点。

这可能是以下之一：

  • 页脚按钮的索引。
  • 后代组件的 id 或 Ext.AbstractComponent.itemId。
  • 一个组件。

可用时间：4.0.0

于 2016-01-20T14:19:22.697 回答