Ext.FormPanel的布局问题

Question

小弟想用Ext做一个用户登录界面：代码如下，已经做好，关键是窗口总是在左上角，应该怎样放到窗口的中间位置：
<script type="text/javascript">
        Ext.onReady(function() {        Ext.QuickTips.init();        Ext.form.Field.prototype.msgTarget = 'side';        var bd = Ext.getBody();
        bd.createChild({ tag: 'h2', html: '' });        var simple = new Ext.FormPanel({
                labelWidth: 75, // label settings here cascade unless overridden
                frame: true,
                title: 'Login Window',
                bodyStyle: 'padding:5px 5px 0',
                width: 350,
                x: 400,
                y: 300,
                renderTo: bd,
                defaults: { width: 230 },
                defaultType: 'textfield',                items: [{
                    id: 'userid',
                    fieldLabel: 'UserId',
                    name: 'first'
                }, {
                    id: 'pass',
                    fieldLabel: 'Password',
                    name: 'last'
                }
        ],                buttons: [{
                    text: 'Login',
                    handler: function() {
                    var user_id = Ext.getDom('userid').value;
                    var pass = Ext.getDom('pass').value;
                        Ext.Ajax.request({
                            url: "Login.ashx",
                            method: "post",
                            params: { userid: user_id, password: pass },
                            success: function() { window.open("index.aspx"); }
                        });
                    }
                 }]
                });
                simple.render(document.body);
            });        
              
        
    </script>

Answer 1

<script type="text/javascript"> 
        Ext.onReady(function() {         Ext.QuickTips.init();         Ext.form.Field.prototype.msgTarget = 'side';         var bd = Ext.getBody(); 
        bd.createChild({ tag: 'h2', html: '' });         var simple = new Ext.FormPanel({ 
                labelWidth: 75, // label settings here cascade unless overridden 
                frame: true, 
                title: 'Login Window', 
                bodyStyle: 'padding:5px 5px 0', 
                width: 350, 
                x: 400, 
                y: 300, 
                renderTo: bd, 
                defaults: { width: 230 }, 
                defaultType: 'textfield',                 items: [{ 
                    id: 'userid', 
                    fieldLabel: 'UserId', 
                    name: 'first' 
                }, { 
                    id: 'pass', 
                    fieldLabel: 'Password', 
                    name: 'last' 
                } 
        ],                 buttons: [{ 
                    text: 'Login', 
                    handler: function() { 
                    var user_id = Ext.getDom('userid').value; 
                    var pass = Ext.getDom('pass').value; 
                        Ext.Ajax.request({ 
                            url: "Login.ashx", 
                            method: "post", 
                            params: { userid: user_id, password: pass }, 
                            success: function() { window.open("index.aspx"); } 
                        }); 
                    } 
                }] 
                });
                document.body.style.textAlign="center";
                simple.render(document.body); 
                document.body.style.marginTop= (document.body.clientHeight - simple.getForm().getEl().dom.clientHeight)/2;
            });        
              
        
    </script>

Answer 2

谢谢hookee,
但是不行呀，结果title居中了，但是面板还是在左上角。

Answer 3

以上ie下可以， 改成以下：                simple.render(document.body); 
                document.body.style.marginLeft= (document.body.clientWidth - simple.getForm().getEl().dom.clientWidth)/2;
                document.body.style.marginTop= (document.body.clientHeight - simple.getForm().getEl().dom.clientHeight)/2;

Answer 4

恩，在IE下是可以，但是我用的是firefox，不知道有没有办法，
还有，我想把密码写成*****的形式，应该怎么做呀？

Answer 5

改成上面的，ff下就可以了，测试过了.
加inputType : 'password',<script type="text/javascript"> 
        Ext.onReady(function() {         Ext.QuickTips.init();         Ext.form.Field.prototype.msgTarget = 'side';         var bd = Ext.getBody(); 
        bd.createChild({ tag: 'h2', html: '' });         var simple = new Ext.FormPanel({ 
                labelWidth: 75, // label settings here cascade unless overridden 
                frame: true, 
                title: 'Login Window', 
                bodyStyle: 'padding:5px 5px 0', 
                width: 350, 
                x: 400, 
                y: 300, 
                renderTo: bd, 
                defaults: { width: 230 }, 
                defaultType: 'textfield',                 items: [{ 
                    id: 'userid', 
                    fieldLabel: 'UserId', 
                    name: 'first' 
                }, { 
                    id: 'pass', 
                    fieldLabel: 'Password', 
                    inputType:'password',
                    name: 'last' 
                } 
        ],                 buttons: [{ 
                    text: 'Login', 
                    handler: function() { 
                    var user_id = Ext.getDom('userid').value; 
                    var pass = Ext.getDom('pass').value; 
                        Ext.Ajax.request({ 
                            url: "Login.ashx", 
                            method: "post", 
                            params: { userid: user_id, password: pass }, 
                            success: function() { window.open("index.aspx"); } 
                        }); 
                    } 
                }] 
                });
                simple.render(document.body); 
                document.body.style.marginLeft= (document.body.clientWidth - simple.getForm().getEl().dom.clientWidth)/2;
                document.body.style.marginTop= (document.body.clientHeight - simple.getForm().getEl().dom.clientHeight)/2;
            });        
              
        
    </script>

Answer 6

光以上代码 ie ff下测试都在中间， 是不是还有其他代码影响?

Answer 7

这里是全部的代码了，不知道什么地方有错误？<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" ValidateRequest="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>User Login</title>    <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="./ext/resources/css/xtheme-gray.css">
    
    <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>    <!-- ENDLIBS -->    <script type="text/javascript" src="./ext/ext-all.js"></script></head>
<body>   <script type="text/javascript">
       Ext.onReady(function() {           Ext.QuickTips.init();           Ext.form.Field.prototype.msgTarget = 'side';           var bd = Ext.getBody();
           bd.createChild({ tag: 'h1', html: '' });           var simple = new Ext.FormPanel({
               labelWidth: 75, // label settings here cascade unless overridden 
               frame: true,
               title: 'Login Window',
               bodyStyle: 'padding:5px 5px 0',
               width: 350,
               x: 500,
               y: 300,
               renderTo: bd,
               defaults: { width: 230 },
               defaultType: 'textfield',               items: [{
                   id: 'userid',
                   fieldLabel: 'UserId',
                   name: 'first'
               }, {
                   id: 'pass',
                   fieldLabel: 'Password',
                   inputType: 'password',
                   name: 'last'
               }
        ],               buttons: [{
                   text: 'Login',
                   handler: function() {
                       var user_id = Ext.getDom('userid').value;
                       var pass = Ext.getDom('pass').value;
                       Ext.Ajax.request({
                           url: "Login.ashx",
                           method: "post",
                           params: { userid: user_id, password: pass },
                           success: function() { window.open("index.aspx"); }
                       });
                   }
           }]
      });
               document.body.style.textAlign = "center";
               simple.render(document.body);
               document.body.style.marginLeft = (document.body.clientWidth - simple.getForm().getEl().dom.clientWidth) / 2;
               document.body.style.marginTop = (document.body.clientHeight - simple.getForm().getEl().dom.clientHeight) / 2;
           });        
        
    </script></body>
</html>

Answer 8

回楼主，你一定用的是IE8。 
这是微软自己的东西不兼容，改回IE7就没问题了。

Answer 9

用表格，居中。在表格中设置一个div。如<div id=myDiv></div>
然后将simple.render(document.body)改为simple.render('myDiv');

Answer 10

bodyStyle : 'padding:0 0 0 300px;width:60%;height:100%;',我是这么解决的