Blur () and focus () are used in EXT-JS to control focusing

Problem reappearance:

We have the following problem: selecting and clicking on a menu item on a combo control in Ext-js will pop up a dialog box, and if the dialog box is not selected, the focus is always on the original combo control and not positioned in the input text box in the pop-up dialog box.

As shown in figure:

When we select Upgrade in this ComboBox, an Input password dialog box pops up:

At this point, if you do not click the Password text box in the Password Check dialog box, the focus is always on the original ComboBox.

The code for this ComboBox is as follows:

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.1 
     selectonfocus:true,   
     editable:false, 
     value: "Actions ", 
     triggeraction: ' Actions ',  
     style: {marginleft:" 100px "}, 
     ID: ' action_ ' + title//Micah changed it and C Hange the ext.getcmp to Ext.ComponentQuery.query to reset the combo box 
     } 
    ]

The corresponding controller select the "Upgrade" triggering event handler is:

Event listener for name Actionscombo combo in the package Select Panel ' COMBOBOX[NAME=ACTIONSC  Ombo] ': {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 box var 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, Dragga 
     
                                                             Ble:true, Autoscroll:true, 
     
                                                        BODYPADDING:25, 
     
                                                                                                                  Layout: {type: ' VBox ',//Arrange child items  // 
     
     Vertically                                                      Align: ' stretch ',//per takes up full width
     
                                                             Padding:5 
     
                                                                      }, items: [ 
     
                                                                             { Xtype: "TextField", ID: "Cmdb-pas 
     
                                                                             Sword ", InputType:" Password ", 
     
                                                                             Enablekeyevents:true, 
     
                              Fieldlabel: "Enter Your password to proceed",                                                 LABELWIDTH:200, 
     
                                                                        Style: { 
     
                                                                     Paddingbottom: ' 10px '} 
     
                                                                      }, {xtype: "Butto 
     
                                                                               N ", Text:" Verify ", 
     
                                                                                       style:{
     
                                                                        MarginTop: ' 20px '       }, "id": "cmdbpwdbtn" 
     
                                                             } 
     
                             
     
                        ] 
     
                                                       }); 
     
                            
     
                                            Passwordpanel.tofront (TRUE); } 
     
                                   } 
     
                  }

Solution:

All we have to do is add focus processing at the end of the event handler function, we first use EXT.GETCMP () to find the original ComboBox control, let it lose focus (blur ()) method, and then let the new dialog box password input text box to get focus on it.

So, we just add the following code between the 第103-106 lines of the above code:

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 Millisecoonds

It's OK, it's very concise.

This article from the "Cohesion of parallel Lines" blog, please be sure to retain this source http://supercharles888.blog.51cto.com/609344/989546

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/Extjs/