ext-js中使用blur()和focus()来控制焦点 - 面向对象网,web开发,Extjs,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Extjs > 正文

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

来源: www.bianceng.cn 阅读:

问题再现:

我们遇到以下的问题,就是在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

就可以了, 非常简洁。

本文出自 “平行线的凝聚” 博客,请务必保留此出处http://supercharles888.blog.51cto.com/609344/989546

查看本栏目更多精彩内容:http://www.bianceng.cn/webkf/Extjs/

Tags:
相关文章列表: