Javascript 将焦点设置在Extjs文本字段上

目前我在设置extjstextfield的焦点时遇到了问题。当窗体显示时，我想将焦点设置为First name文本框，并尝试使用内置函数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);

---

有时在聚焦时增加一点延迟会有所帮助。这是因为某些浏览器（当然是Firefox3.6）需要一些额外的时间来呈现表单元素

请注意，ExtJS的

focus（）

方法接受

defer

作为参数，因此请尝试：

Ext.getCmp('first_name').focus(false, 200);

若要在呈现窗体后设置焦点，应为文本字段使用“afterrender”事件

    {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus();
          }
        }
    }

基于这一点，我尝试了很多事情，并找到了一种方法。代码如下：

{
    fieldLabel: 'First Name',
    name: 'first',
    id: 'first_name',
    allowBlank: false,
    listeners: {
      afterrender: function(field) {
        field.focus(false, 1000);
      }
    }
}

---

尝试添加以下属性：

hasfocus:true,

并使用以下功能：

Ext.getCmp('first_name').focus(false, 200);

{
    id: 'fist_name',
    xtype: 'textfield',
    hasfocus:true,
}

---

为什么不直接添加

defaultFocus:“#first_name”

，而不是添加大量代码行

---

或者，在

this.callParent（参数）之后添加此行
Ext.getCmp（'comp_id'）。焦点（''，10）
我今天一直在努力解决这个问题，我想我找到了解决办法。诀窍是在表单面板上调用
show（）
方法之后使用
focus（）
方法。也就是说，将侦听器添加到
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);
            }
    });
    }
});

我也一直在努力让人们关注InternetExplorer中的一个文本框（因为上面的建议在chrome和Firefox中运行良好）。在本页上尝试了上述建议的解决方案，但没有一个在IE中有效。经过大量研究，我找到了适合我的解决方案，我希望它也能对其他人有所帮助：

使用
focus（true）
或者如果您想延迟此操作，则只需使用
focus（true，200）
。
关于上述问题，代码为：

  {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus(true);
          }
        }
    }

我的表单在一个窗口内，文本字段不会聚焦，除非我先聚焦窗口

                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
                    }
                }

使用
afterlayout
事件。在元素上设置一个标志，以防止多次聚焦以获得稳定性

afterlayout: function(form) {
  var defaultFocusCmp = form.down('[name=first]');
  if (!defaultFocusCmp.focused) {
    defaultFocusCmp.focus();
    defaultFocusCmp.focused = true;
  }
}

这对我很有用。在textfield或textarea中添加侦听器配置：

listeners:{
            afterrender:'onRender'
        }

之后，在控制器写入函数中：

onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}

Ext.defer是setTimout（）的换行符。没有Ext.defer（）字段。focus（）不起作用，我也不知道为什么。
您不能在listeners配置中编写该函数，而不是使用控制器的函数名，但最好的做法是在组件的控制器中保存函数。祝你好运。
尝试设置焦点的代码在哪里？即使在ExtJS 4.2中有延迟，我也无法实现这一点。。我想这需要在一些回调中完成，但我不知道是哪一个。我在视图上尝试了“渲染器”事件侦听器，但也不起作用。另请参阅，谢谢您的回答，但它尚未起作用。也许还有别的办法。目前我在浏览器FireFox 5.0.Wrap simple.render（document.body）中运行它，在Ext.onReady中，那么你不必使用delayer如果你使用config-allowBlank:false，这可能会导致一些验证问题，在这种情况下，你需要设置false参数，稍微延迟也不会有什么影响，例如field.focus（false，1000）如果我们在
focus（）
中将参数保持为
true
，它还能工作吗？请解释此行为。如果此解决方案有效，请将其标记为答案。defaultFocus属性似乎仅适用于windows。如果我错了，请纠正我。ExtJs 6.6.0，defaultFocus不工作-我有一个TabPanel->FormPanel->textField。请提供更多详细信息。你的代码是做什么的？它是如何解决这个问题的？
onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}