论坛首页 Web前端技术论坛

关于window的中field的focus问题

浏览 4879 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-01-19  
我想在页面打开时username自动取得光标,但一直成功不了。我是写在window.show()的回调函数里的,请各位DX帮我看看怎么回事。
下面是我的代码:
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="extlib/resources/css/ext-all.css"/>
<script type="text/javascript" src="extlib/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extlib/ext-all.js"></script>
<script type="text/javascript" src="js/loginwindow.js"></script>

<script type='text/javascript' src='/testweb/dwr/engine.js'></script>
<script type='text/javascript' src='/testweb/dwr/util.js'></script>
<script type='text/javascript' src='/testweb/dwr/interface/userLogin.js'></script>

<link rel="stylesheet" type="text/css" href="css/testweb.css"/>
</head>
<body id='mainbody'>
<div id="animateTarget"></div>
</body>
</html>


loginwindow.js

/**
 * js file for login form
 **/
Ext.BLANK_IMAGE_URL = 'extlib/resources/images/default/s.gif';

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    
    var loginForm = new Ext.form.FormPanel({
        labelWidth: 55,
        frame:true,
        layout: 'form',
        bodyStyle:'padding:15px 20px 0',
        labelAlign: 'left',
        waitMsgTarget: true,
        border: false,
        bodyBorder: false,

        items: [{
            xtype:'textfield',
            fieldLabel: '用户名',
            name: 'username',
            id: 'username',
            anchor:'90%',
            allowBlank:false,
            blankText:'用户名不能为空'
        },{
            xtype:'textfield',
            fieldLabel: '密 码',
            name: 'password',
            id: 'password',
            inputType: 'password',
            anchor: '90%',
            allowBlank:false,
            blankText:'密码不能为空'
        },{
            layout: 'column',
            items: [{
                labelWidth: 55,
                columnWidth:.63,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: '验证码',
                    name: 'validatecode',
                    id: 'validatecode',
                    anchor:'85%',
                    maxLength:4,
                    maxLengthText:'验证码最大长度为{0}',
                    maskRe:new RegExp("[0-9]"),
                    allowBlank:false,
                    blankText:'验证码不能为空'
                }]
            },{
                columnWidth:.37,
                layout: 'form',
                items: [{
                    xtype: 'panel',
                    html: '<img id="validatecode_pic" src="validatecode.jpg" />',
                    style: 'border:1px solid #B5B8C8;',
                    width: '60',
                    height: '20'
                }]
            }]
        }]
    });

    var win = new Ext.Window({
        title: '用户登录',
        layout: 'fit',
        width:300,
        height:200,
        resizable: false,
        closeAction:'hide',
        buttonAlign: 'center',
        modal: true,
        
        items: [loginForm],
        
        buttons: [{
            text: '登录',
            id: 'btnLogin',
            name: 'btnLogin',
            type: 'submit',
            handler: function() {
                loginForm.getForm().submit({
                    url:'userlogin.do',
                    waitMsg:'正在验证用户...',
                    success: onLoginSuccess,
                    failure: onFailure
                });
            }
        }]
    });
    
    /*  在用户校验失败的时候判断是否是服务器连接失败  */
    var onFailure = function(form,action){
        if(action.failureType=="connect") {
            Ext.MessageBox.alert('Message','服务器异常', '服务器异常,请与管理员联系!');
        }
        
        //重新请求验证码
        Ext.get('validatecode_pic').dom.src = 'validatecode.jpg?dt=' + (new Date()).getTime();
        
        //清空验证码输入字段
        Ext.get('validatecode').dom.value = '';
        
        //选中username
        Ext.getCmp("username").focus(true);
    };
    
    /*  用户校验成功之后的动作  */
    var gotoUrl = function(){
        window.location.href="index.html";
    };
    
    var onLoginSuccess = function(form,action){
        loginForm.destroy();
    }.createSequence(gotoUrl,this);
    
    win.show('animateTarget',function() {
        Ext.getCmp('username').focus(true);
    });
    
    Ext.get('validatecode').dom.maxLength = 4;
    
    Ext.getDoc().dom.onkeydown = function() {
        if(event.keyCode == 13 && event.srcElement.type != 'button' 
        && event.srcElement.type != 'submit' && event.srcElement.type != 'reset' 
        && event.srcElement.type != 'textarea' && event.srcElement.type != '') {
            event.keyCode=9;
        }
    };
    
});


   发表时间:2008-03-11  
jack说在window下会有些不同...
Try adding this config directly to the window config:

Code:

focus: function(){
     Ext.get('firstInput').focus();
}

Another, longer way:

Code:

win.on('show', function() { var f = Ext.get('firstInput'); f.focus.defer(100, f); });

可能是渲染需要时间吧...
0 请登录后投票
   发表时间:2008-10-07  
zlq4863947 写道
jack说在window下会有些不同...
Try adding this config directly to the window config:

Code:

focus: function(){
     Ext.get('firstInput').focus();
}

Another, longer way:

Code:

win.on('show', function() { var f = Ext.get('firstInput'); f.focus.defer(100, f); });

可能是渲染需要时间吧...

美女所说有道理!渲染时间问题在许多对方都有碰到,就看你代码怎么布局了!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics