Javascript 将焦点设置在 Extjs 文本字段上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6591371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set focus on Extjs textfield
提问by Sokmesa Khiev
Currently I got problem with setting focus on extjs textfield. When form show, I want to set focus to First name text box and I try to use build in function focus() but still can't make it work. I am happy to see your suggestion.
目前我在 extjs 文本字段上设置焦点时遇到问题。当表单显示时，我想将焦点设置为名字文本框，我尝试使用内置函数 focus() 但仍然无法使其工作。我很高兴看到你的建议。
var simple = new Ext.FormPanel({
labelWidth: 75,
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
id: 'first_name',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
simple.render(document.body);
回答by user123444555621
Sometimes it helps to add a little delay when focusing. This is because certain browsers (Firefox 3.6 for sure) need a bit of extra time to render form elements.
有时在聚焦时增加一点延迟会有所帮助。这是因为某些浏览器（肯定是 Firefox 3.6）需要一些额外的时间来呈现表单元素。
Note that ExtJS's focus()method accepts deferas an argument, so try that:
请注意，ExtJS 的focus()方法接受defer作为参数，因此请尝试：
Ext.getCmp('first_name').focus(false, 200);
回答by Sokmesa Khiev
Based on Pumbaa80's answerand Tanel's answerI have tried many things and found a way to do it. Here is the code:
根据Pumbaa80 的回答和Tanel 的回答，我尝试了很多事情并找到了一种方法。这是代码：
{
fieldLabel: 'First Name',
name: 'first',
id: 'first_name',
allowBlank: false,
listeners: {
afterrender: function(field) {
field.focus(false, 1000);
}
}
}
回答by Tanel
You should use "afterrender" event for your textfield if you want to set focus after form is rendered.
如果要在呈现表单后设置焦点，则应为文本字段使用“afterrender”事件。
{
fieldLabel: 'First Name',
name: 'first',
id: 'first_name',
allowBlank: false,
listeners: {
afterrender: function(field) {
field.focus();
}
}
}
回答by user1662505
Try to add the following property:
尝试添加以下属性：
hasfocus:true,
and use the function below:
并使用以下功能：
Ext.getCmp('first_name').focus(false, 200);
{
id: 'fist_name',
xtype: 'textfield',
hasfocus:true,
}
回答by Raza Ahmed
why not just add defaultFocus : '#first_name'instead of adding to much lines of code?
为什么不直接添加defaultFocus : '#first_name'而不是添加多行代码？
OR, after this.callParent(arguments);add this line Ext.getCmp('comp_id').focus('', 10);
或者，在this.callParent(arguments);添加这一行之后Ext.getCmp('comp_id').focus('', 10);
回答by Carlos Gavidia-Calderon
I've been struggling with that issue today, and I think I got the solution. The trick is using the focus()method after the show()method was called on the Form Panel. That is, adding a listener to the showevent:
我今天一直在努力解决这个问题，我想我得到了解决方案。诀窍是在表单面板上调用该focus()方法之后使用该方法show()。即为show事件添加一个监听器：
Ext.define('My.form.panel', {
extend: 'Ext.form.Panel',
initComponent: function() {
this.on({
show: function(formPanel, options) {
formPanel.down('selector-to-component').focus(true, 10);
}
});
}
});
回答by amit
I have also been struggling with getting the focus on a text box in the Internet Explorer(As the above suggestions are working fine in chrome and Firefox). Tried the solutions suggested above on this page but none of them worked in IE. After so many research I got the workaround that worked for me, I hope it will be helpful to others as well:
我也一直在努力将注意力集中在 Internet Explorer 中的文本框上（因为上述建议在 chrome 和 Firefox 中运行良好）。尝试了本页上面建议的解决方案，但没有一个在 IE 中有效。经过如此多的研究，我找到了对我有用的解决方法，我希望它对其他人也有帮助：
Use focus(true)or if you want to delay this then use focus(true, 200)simply.
In ref of the above problem the code would be:
使用focus(true)或者如果你想延迟它，那么focus(true, 200)简单地使用。在上述问题的参考中，代码将是：
{
fieldLabel: 'First Name',
name: 'first',
id: 'first_name',
allowBlank: false,
listeners: {
afterrender: function(field) {
field.focus(true);
}
}
}
回答by Ivan Matskan
That works for me. In textfield or textarea add listeners config:
这对我行得通。在 textfield 或 textarea 添加侦听器配置：
listeners:{
afterrender:'onRender'
}
After, in your controller write function:
之后，在您的控制器中写入函数：
onRender:function(field){
Ext.defer(()=>{
field.focus(false,100);
},1);
}
Ext.defer is wrap for setTimout(). Without Ext.defer()field.focus()doesn't work and i don't why. You cant write that function in listenersconfig instead of using controller's function name, but good practice is hold functions in component's controller. Good luck.
Ext.defer 是setTimout() 的包装。没有Ext.defer() field.focus()不起作用，我不知道为什么。您不能在侦听器配置中编写该函数而不是使用控制器的函数名称，但好的做法是在组件的控制器中保留函数。祝你好运。
回答by Gavin Palmer
My form was inside of a window and the textfield would not focus unless I focused the window first.
我的表单位于窗口内，除非我先聚焦窗口，否则文本字段不会聚焦。
listeners: {
afterrender: {
fn: function(component, eOpts){
Ext.defer(function() {
if (component.up('window')){
component.up('window').focus();
}
component.focus(false, 100);
}, 30, this);
},
scope: me
}
}
回答by vahissan
Use afterlayoutevent. Set a flag on the element to prevent focusing multiple times for stability.
使用afterlayout事件。在元素上设置一个标志以防止多次聚焦以保持稳定性。
afterlayout: function(form) {
var defaultFocusCmp = form.down('[name=first]');
if (!defaultFocusCmp.focused) {
defaultFocusCmp.focus();
defaultFocusCmp.focused = true;
}
}
