问题再现:
我们遇到以下的问题,就是在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.1
- selectOnFocus: 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 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,
- 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
就可以了, 非常简洁。