ext-js当用blur()和focus()来控制焦点

 问题再现：

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

如图：

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

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

这个comboBox的代码如下：

1. xtype: 'combo', 
2.   store: new Ext.data.SimpleStore({ 
3.    fields:['actiontype', 'action'], 
4.             data : array4actionscombo 
5.             }), 
6.      extra : {env : scope.store.env, service : scope.store.service}, 
7.      displayField:'action', 
8.      valueField:'actiontype', 
9.      mode: 'local', 
10.      name : 'actionscombo',//Micah change id to name for the defect of double element after update extjs to 4.1.1 
11.      selectOnFocus: true,   
12.      editable:false, 
13.      value : "Actions", 
14.      triggerAction: 'Actions',  
15.      style : {marginLeft:"100px"}, 
16.      id : 'action_' + title // Micah changed it and change the Ext.getCmp to Ext.ComponentQuery.query to reset the combo box 
17.      } 
18.     ] 

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

1. //event listener for name actionscombo combo in the package select panel 
2.  
3.                   'combobox[name=actionscombo]':{ 
4.  
5.                        select: function(combo, records, eOpts){ 
6.  
7.                                 var scope = this; 
8.  
9.                                             if(combo.value == 'upgrade' || combo.value=="enabledisable" || combo.value=="sitespecEnDs"){ 
10.  
11.                                                     window.action = combo.value; 
12.  
13.                                                     scope.combo = combo; // combo box 
14.  
15.                                                     var w = Ext.getCmp('feedpanel'); 
16.  
17.                         w.getEl().mask(); 
18.  
19.                         
20.  
21.                         var passwordPanel = Ext.create("Ext.panel.Panel",{ 
22.  
23.                           title: 'Password Check', 
24.  
25.                                                              width: 400, 
26.  
27.                                                              height: 160, 
28.  
29.                                                              closable : true, 
30.  
31.                                                              renderTo: Ext.getBody(), 
32.  
33.                                                              id : "passwordPanel", 
34.  
35.                                                              floating : true, 
36.  
37.                                                              draggable:true, 
38.  
39.                                                              autoScroll : true, 
40.  
41.                                                              bodyPadding : 25, 
42.  
43.                                                         layout: { 
44.  
45.                                                            type: 'vbox',       // Arrange child items 
46.  
47.                                                                                                                   // vertically 
48.  
49.                                                            align: 'stretch',    // Each takes up full width 
50.  
51.                                                            padding: 5 
52.  
53.                                                              }, 
54.  
55.                                                              items : [ 
56.  
57.                                                                       { 
58.  
59.                                                                              xtype : "textfield", 
60.  
61.                                                                              id : "cmdb-password", 
62.  
63.                                                                              inputType : "password", 
64.  
65.                                                                              enableKeyEvents:true, 
66.  
67.                                                                              fieldLabel : "Enter your password to proceed", 
68.  
69.                                                                                labelWidth:200, 
70.  
71.   
72.  
73.                                                                                style: { 
74.  
75.                                                                         paddingBottom: '10px' 
76.  
77.                                                                       } 
78.  
79.                                                                      }, 
80.  
81.                                                                       { 
82.  
83.                                                                                xtype : "button", 
84.  
85.                                                                                text : "Verify", 
86.  
87.                                                                                style:{ 
88.  
89.                                                                                        marginTop:'20px' 
90.  
91.                                                                                }, 
92.  
93.                                                                                "id" : "cmdbPwdBtn" 
94.  
95.                                                                      } 
96.  
97.                                                              ] 
98.  
99.                                                        }); 
100.  
101.                          
102.  
103.                         passwordPanel.toFront(true); 
104.  
     
105.                         
106.  
107.                                             } 
108.  
109.                                    } 
110.  
111.                   } 

解决方案：

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

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

1. combo.blur(); //charles:let the combo box lose focus  
2.  
3. Ext.getCmp("cmdb-password").focus(false,200);//charles::let the password field obtain focus.delay it for 200 millisecoonds  

就可以了， 非常简洁。