问题再现:
我们遇到以下的问题,就是在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',
- selectOnFocus: true,
- editable:false,
- value : "Actions",
- triggerAction: 'Actions',
- style : {marginLeft:"100px"},
- id : 'action_' + title
- }
- ]
对应的controller中选择"Upgrade”触发事件处理函数是: -
-
- '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;
-
- 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',
-
-
-
- align: 'stretch',
-
- 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();
-
- Ext.getCmp("cmdb-password").focus(false,200);
就可以了, 非常简洁。
本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/989546,如需转载请自行联系原作者