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

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(); 

或者从您的形式使用更好的向上/向下的方法之一通过一个特定的类找到它，而比依靠一个Id。

Answer 3

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

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

指定组件时，此窗口集中到接收焦点。

这可能是以下之一：

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

可用，因为：4.0.0