ExtJS中调用focus方法无效的解决方法

在ExtJS中用于盒型控件的BoxComponent(TextField、TextArea、CheckBox、ComboBox等的父类)提供了一个focus方法,用于控制光标的焦点。但是在调用该方法的时候往往会发现达不到预期的效果,很多时候根本没有办法来控制光标的焦点。

在BoxComponent文档中对focus方法的说明如下:

focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.

可以看到这个方法有两个可选的参数,第一个的含义是是否全选中所在的文本内容(默认为false),第二个是设置一个延迟的时间,单位是毫秒(默认为0,不延迟)。下面是两种调用的方法:

var textField = new Ext.form.TextField({
// 属性就省略了 ....
});
// 默认的调用
textField.focus();
// 设置延迟的调用
textField.focus(false, 100);
// 等同于上面的方式
textField.focus.defer(100, textField);

如果做一个测试的话可以发现使用后面两种方式之后就会达到预期的效果了,这是因为所有的可视控件需要一个渲染的时间的,如果不设置focus的延迟时间,则再调用focus方法的时候该控件还没有渲染完成,当时是不会成功了。

参考资料:关于window的中field的focus问题

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注