问题再现：

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

如图：

ext-js当用blur()和focus()来控制焦点_第1张图片

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

ext-js当用blur()和focus()来控制焦点_第2张图片

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

这个comboBox的代码如下：

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


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

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

 

解决方案：

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

 

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

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

就可以了， 非常简洁。