ExtJS 6.2.0：页面刷新后设置文本框焦点问题求助

问题分析 #

页面刷新后组件渲染是异步过程，容器的afterrender触发时，内部嵌套的表单和文本字段可能还未完全就绪，直接调用容器focus或依赖defaultFocus可能因层级或时机问题失效。以下是几种可靠的解决方式：

方案一：直接在文本字段的afterrender事件中聚焦 #

让文本字段自身完成渲染后主动获取焦点，时机最精准：

{
    xtype: 'textfield',
    id: 'searchInputField',
    reference: 'searchInputField',
    allowBlank: false,
    msgTarget: 'under',
    name: 'uuid',
    bind: '{searchInput}',
    listeners: {
        afterrender: function(field) {
            // 可选延迟，确保组件完全渲染就绪
            field.focus(false, 100);
        }
    }
}

方案二：修正容器afterrender逻辑，精准定位文本字段 #

容器渲染完成后，通过组件查询找到文本框再执行聚焦：

listeners: {
    afterrender: function(cmp) {
        var searchField = cmp.down('#searchInputField');
        if (searchField) {
            // 延迟执行，避免子组件未渲染完成
            Ext.defer(function() {
                searchField.focus();
            }, 200);
        }
    }
}

方案三：优化defaultFocus选择器 #

原代码的defaultFocus可能因组件层级问题无法匹配到目标字段，调整为更精准的路径选择器：

defaultFocus: 'form textfield#searchInputField'

同时可移除容器的afterrender监听器，让ExtJS自动处理焦点分配。

内容的提问来源于stack exchange，提问作者CycleGeek