将焦点设置在Extjs文本框上

Question

我目前遇到了在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);

- Sokmesa Khiev

---

代码中哪里尝试设置焦点？ - czarchaic

即使在ExtJS 4.2中延迟了一段时间，我仍然无法让它工作。我想这需要在某个回调函数中完成，但我找不到是哪一个。我已经尝试在视图上使用'renderer'事件监听器，但那也没有起作用。 - Entree

请参阅在刚创建的窗口中设置文本输入的焦点。 - Vadzim

Answer 1

有时候在聚焦元素时加一点延迟会有帮助。这是因为某些浏览器（如Firefox 3.6）需要额外的时间来渲染表单元素。

请注意，ExtJS 的 focus() 方法接受 defer 作为参数，可以尝试使用它：

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

- user123444555621

---

谢谢你的回答，但它还没有起作用。可能有另一种方法来做这件事。目前我正在Firefox 5.0浏览器上运行它。 - Sokmesa Khiev

Answer 2

根据 Pumbaa80 的回答 和 Tanel 的回答，我尝试了很多方法并找到了一种方法来实现它。以下是代码：

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

- Sokmesa Khiev

---

即使我们在 focus() 函数的参数中保持为 true，它仍然有效吗？你能解释一下这种行为吗？ - Mr_Green

如果这个解决方案有效，请将其标记为答案。 - Athafoud

Answer 3

如果您想在表单渲染后设置焦点，应该使用“afterrender”事件来设置您的文本字段。

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

- Tanel

---

将 simple.render(document.body) 包装在 Ext.onReady 中，这样就不必使用 delay。 - Tanel

如果您使用config - allowBlank: false，可能会导致某些验证问题，这种情况下您需要设置false参数，并且稍微延迟也不会有影响，例如field.focus(false, 1000)。 - Steve Obbayi

Answer 4

为什么不直接添加 defaultFocus : '#first_name' 而是要添加那么多行代码呢？

或者，在 this.callParent(arguments); 后添加这一行 Ext.getCmp('comp_id').focus('', 10);

- Raza Ahmed

---

属性defaultFocus似乎只适用于窗口。如果我错了，请纠正我。 - David

ExtJs 6.6.0，defaultFocus不起作用 - 我有一个TabPanel -> FormPanel->textField。 - boggy

Answer 5

尝试添加以下属性：

hasfocus:true,

请使用下面的函数：

并使用以下函数：

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

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

- user1662505

Answer 6

我也一直在努力让Internet Explorer中的文本框获得焦点（因为上面的建议在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);
          }
        }
    }

- amit

Answer 7

我今天一直在研究这个问题，现在我想我找到了解决方法。关键在于在表单面板调用 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);
            }
    });
    }
});

- Carlos Gavidia-Calderon

Answer 8

对我来说可以。在文本字段或文本区域中添加监听器配置：

listeners:{
            afterrender:'onRender'
        }

在你的控制器中编写以下函数：

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

Ext.defer是对setTimout()的封装。没有Ext.defer()，field.focus()无法工作，我不知道为什么。 你可以在listeners配置中编写该函数，而不是使用控制器中的函数名称，但最好将函数保存在组件的控制器中。祝你好运。

- Ivan Matskan

Answer 9

我的表格在一个窗口中，文本字段除非我先聚焦于窗口否则无法集中焦点。

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

- Gavin Palmer

Answer 10

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

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

- vahissan