ext-js中使用blur（）和focus（）来控制焦点

ext-js中使用blur（）和focus（）来控制焦点2014-05-27问题再现：

我们遇到以下的问题，就是在ext-js的一个combo控件上选择并点击一个menu item,会弹出一个对话框，如果不选择对话框的时候，焦点始终在原来的combo控件上，而不会定位到弹出对话框中的输入文本框中。

如图：

当我们在这个combobox中选择upgrade时候，会弹出一个输入密码对话框：

这时候，如果不点击"Password Check"对话框中的密码文本框，那么焦点始终在原来的Combobox上。

这个comboBox的代码如下：

xtype: "combo", store: new Ext.data.SimpleStore（{fields:["actiontype", "action"], data : array4actionscombo }）,extra : {env : scope.store.env, service : scope.store.service},displayField:"action",valueField:"actiontype",mode: "local",name : "actionscombo",//Micah change id to name for the defect of double element after update extjs to 4.1.1selectOnFocus: true,editable:false,value : "Actions",triggerAction: "Actions", style : {marginLeft:"100px"},id : "action_" + title // Micah changed it and change the Ext.getCmp to Ext.ComponentQuery.query to reset the combo box} ]

对应的controller中选择"Upgrade”触发事件处理函数是：

//event listener for name actionscombo combo in the package select panel"combobox[name=actionscombo]":{ select: function（combo, records, eOpts）{var scope = this;if（combo.value == "upgrade" || combo.value=="enabledisable" || combo.value=="sitespecEnDs"）{window.action = combo.value;scope.combo = combo; // combo boxvar w = Ext.getCmp（"feedpanel"）;w.getEl（）.mask（）; var passwordPanel = Ext.create（"Ext.panel.Panel",{title: "Password Check", width: 400, height: 160, closable : true, renderTo: Ext.getBody（）, id : "passwordPanel", floating : true, draggable:true, autoScroll : true, bodyPadding : 25,layout: { type: "vbox", // Arrange child items// vertically align: "stretch",// Each takes up full width padding: 5}, items : [{ xtype : "textfield", id : "cmdb-password", inputType : "password", enableKeyEvents:true, fieldLabel : "Enter your password to proceed", labelWidth:200,style: {paddingBottom: "10px" } },{ xtype : "button", text : "Verify", style:{ marginTop:"20px"}, "id" : "cmdbPwdBtn"} ] }）;passwordPanel.toFront（true）; } }}

解决方案：

我们只要在事件处理函数最后添加对焦点的处理就可以了，我们先用Ext.getCmp（）找到原来的combobox控件，让其失去焦点（blur（））方法，然后让新的对话框的密码输入文本框获得焦点就可以了。

所以，我们只要在上述代码的第103-106行之间添入以下代码：

combo.blur（）; //charles:let the combo box lose focus Ext.getCmp（"cmdb-password"）.focus（false,200）;//charles::let the password field obtain focus.delay it for 200 millisecoonds

就可以了，非常简洁。

本文出自 “平行线的凝聚” 博客，请务必保留此出处http://supercharles888.blog.51cto.com/609344/989546