ExtJS页面加载时隐藏TextField光标问题求助

我明白你现在遇到的问题：你的「Last Name」文本框在页面加载完成后会自动获取焦点（显示闪烁光标），但你希望只有用户点击它时才会出现光标。你尝试的hasFocus、readOnly、editable这些属性确实不对症，下面给你几个实用的解决方案：

方案1：组件渲染后强制失焦 #

给TextField添加afterrender监听事件，在组件渲染完成后主动调用blur()方法，覆盖ExtJS可能自动触发的聚焦行为：

{
    xtype: 'textfield',
    name: 'lastName',
    id: 'patientSearchLastName',
    msgTarget: 'side',
    enableKeyEvents: true,
    fieldLabel: 'LAST NAME <span style="color:red">*</span>', // 这里帮你修正了color:g的笔误，改成红色更符合必填项的常规样式
    labelAlign: 'top',
    fieldStyle: "font: bold 12px sans-serif;background:#fff;color:#444;",
    padding: 8,
    validator: function(value) {
        var isRequired = me.oneFieldRequired();
        if (typeof isRequired === "string") return isRequired;
        return me.validateName(value);
    },
    listeners: {
        specialkey: keyEnterListner,
        keyup: function(thisEl, e, eOpts) {
            me.validateFields(['firstName', 'identifierValue']);
        },
        blur: function(thisEl, e, eOpts) {
            me.validateFields(['firstName', 'identifierValue']);
        },
        // 添加这个监听，渲染完成后强制失焦
        afterrender: function(field) {
            field.blur();
        }
    }
}

方案2：检查父容器的默认聚焦配置 #

如果这个TextField所在的表单容器（比如FormPanel）设置了defaultFocus属性指向该字段，那页面加载时就会自动聚焦。你需要找到父容器的配置，移除defaultFocus或者将其改为其他不需要自动聚焦的组件。

方案3：排查代码中主动调用的focus方法 #

检查项目代码里有没有在页面加载时主动调用这个文本框focus()方法的逻辑，比如：

Ext.getCmp('patientSearchLastName').focus();

如果找到这类代码，要么移除它，要么调整触发时机（比如只在特定用户操作后调用，而不是页面加载时）。

方案1是快速解决当前问题的可靠方法，方案2和3则是从根源上解决问题的思路，你可以按顺序尝试，看看哪个适合你的项目！

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