ExtJS 中tab中面板大小问题

Question

/*Ext.Loader.setConfig({
    enabled: true
});

Ext.Loader.setPath('Ext.ux', 'ExtJS4/ux');

Ext.require([
    'Ext.ux.statusbar.StatusBar',
  'Ext.ux.statusbar.ValidationStatus'
]);*/

Ext.onReady(function(){
         initLRE();
});

function initLRE()
{
    var user_name=Ext.util.Cookies.get("user.name");
    b=(user_name==null);
    var event_source=new Ext.util.Observable();
    var lre1=Ext.get("lre_1");
    var lre2=Ext.get("lre_2");
    lre1.dom.href=lre2.dom.href="javascript:void(0)";
    if(b)
    {
        lre1.dom.innerHTML="登录";
        lre2.dom.innerHTML="注册";
        lre1.on("click",login_show,this,{stopEvent:true,tab:'login'});
        lre2.on("click",login_show,this,{stopEvent:true,tab:'register'});
        //fireEvent 以用户名登录
        event_source.fireEvent('userVisit');
    }
    else
    {
        lre1.dom.innerHTML="你好,"+user_name;
        lre2.dom.innerHTML="退出";
        lre2.on("click",exit,this,{stopEvent:true,tab:'register'});
        event_source.fireEvent('anonyVisit');
    }
}

function exit()
{
    //销毁cookies fireEvent 退出，即以匿名登录。
        alert("退出");
        
}

function login_show(evt,el,o)
{
    //登录注册的form,使用tab合成
    var le_tabs=Ext.createWidget('tabpanel',{
            tabCls:'base_font'
            ,plain:true
            ,bodyStyle:'padding:10'
            ,defaults:{
                xtype:'form'
                ,border:false
                ,itemCls:'form_item' 
                ,bodyStyle:'padding:40px'
                ,fieldDefaults:{
                        labelWidth:50
                       ,labelSeparator:' '
                       ,msgTarget:'side'
                    }               
                ,anchor:'100%'
             }  
            ,items:[
            {
                 itemId:'login' 
                ,title:'登录' 
                ,id:'login_form'
                ,height:'150px'
                ,width:'300px'
                ,items:[
                {
                     allowBlank:false
                    ,xtype:'textfield'
                    ,fieldLabel:'用户名'
                    ,name:'user.name'
                    ,maxLength:20
                    ,invalidText:'用户名长度必须在1-20之间'
                },{
                     allowBlank:false
                    ,fieldLabel:'密码'
                    ,xtype:'textfield'
                    ,name:'user.passWord'
                    ,maxLength:20
                    ,inputType:'password'
                    ,id:'user.passWord'
                    ,invalidText:'密码长度必须在1-20之间'
                }]
                ,buttons:[
                {
                    text:'登录'
                },{
                    text:'取消'
                }]
            },{
                 itemId:'register'
                ,id:'register_form' 
                ,height:'280px'
                ,title:'注册'
                ,width:'300px'
                ,items:[
                {
                    xtype:'textfield'
                    ,fieldLabel:'用户名'
                    ,name:'user.name'
                    ,id:'user.name'
                    ,maxLength:20
                    ,invalidText:'用户名长度必须在1-20之间'
                    ,listeners:{
                        blur:function(obj)
                            {
                                if(obj.getValue().length==0)
                                {
                                    obj.markInvalid("不能为空");
                                    return;
                                }
                                new Ext.data.Connection().request({
                                    url:'userUnique'
                                    ,method:'GET'
                                    ,params:'user.name='+obj.getValue()
                                    ,success:function(rsp,opt){
                                        var res=Ext.JSON.decode(rsp.responseText);
                                        if(res.res=='error')
                                            obj.markInvalid("该用户已存在");
                                    }                               
                                });
                                
                            }}
                },{
                    xtype:'radiogroup'
                    ,fieldLabel:'性别'
                    ,defaults:{name:'user.sex'}
                    ,items:[{
                        inputValue:'male'
                        ,boxLabel:'男'
                    },{
                        inputValue:'female'
                        ,boxLabel:'女'
                    }]
                },{
                    xtype:'datefield'
                    ,fieldLabel:'出生日期'
                    ,minValue:'1990-1-1'
                    ,maxValue:new Date()
                    ,name:'user.birth'
                    ,invalidText:'有效日期从1990-1-1到今天'
                },{
                     allowBlank:false
                    ,fieldLabel:'密码'
                    ,xtype:'textfield'
                    ,name:'user.password'
                    ,maxLength:20
                    ,inputType:'password'
                    ,invalidText:'密码长度必须在1-20之间'
                },{
                     xtype:'textfield'
                    ,fieldLabel:'职业'
                    ,name:'user.occupation'
                    ,maxLength:20
                    ,invalidText:'长度不能超过20'
                },{
                     xtype: 'fieldcontainer'
                     ,fieldLabel:'验证码'
                     ,defaults:{hideLabel:true}
                     ,combineErrors:true
                     ,layout: {
                        type: 'hbox',
                        defaultMargins: {top: 0, right: 2, bottom: 0, left: 0}
                     }
                     ,items:[
                     {xtype:'textfield',maxLength:4,id:'verify',width: 40,name:'verify'}
                     ,{html:"<img src='verifyPic' id='verifyPic' style='vertical-align:middle;'/>",width:70}
                     ,{xtype:'button',text:'换一张',width: 50
                            ,listeners:{
                            click:function(button,evt)
                            {
                                Ext.get('verifyPic').dom.src="verifyPic?ts="+new Date().getTime().toString();
                            }
                            }}
                     ]
                }/*, 
                 new Ext.create('Ext.ux.StatusBar', 
                    {  dock: 'bottom',
                        id: 'form-statusbar',
                        defaultText: 'Ready',
                        plugins: Ext.create('Ext.ux.statusbar.ValidationStatus', {form:'register_form'})
                    })*/]
                ,buttons: [
                {
                    text:'注册'
                    ,handler:function(btn,evt){
                        var formPanel=Ext.ComponentManager.get('register_form');
                        if(formPanel.form.isValid())
                        {
                            formPanel.form.doAction('submit',{
                                url:'user_register'
                                ,method:'POST'
                                ,headers:{'Content-Type':'application/x-www-form-urlencoded'}
                                ,clientValidation:true
                                ,success:function(form,action){
                                    alert(action.result);
                                    if(action.result.res=='ok')
                                    {
                                        initLRE();
                                        Ext.ComponentManager.get('le_window').close();
                                    }
                                    else
                                    {
                                        Ext.MessageBox.alert('注册',action.result.msg);   
                                    }
                                }                               
                            });
                        }
                        else
                        {
                            Ext.MessageBox.alert('注册','输出信息有误');                            
                        }
                    }
                },{
                    text:'取消'
                    ,handler:function(){
                            Ext.ComponentManager.get('register_form').getForm().reset();
                        }
                }]
            }]
        
        });
    le_tabs.setActiveTab(o.tab);
    
    //弹出的登录注册窗口
    var le_window=Ext.create("widget.window",{
             autoHeight:true
            ,autoWidth:true
            ,id:'le_window'
            ,border:false
            ,closable:true    //最好写上，不然需要单击很久才能关闭窗口
            ,closeAction:'destroy' 
            ,draggable:false
            ,resizable:false
            ,modal:true
            ,items:le_tabs  
            ,title:'在线投票'
            ,listeners:{ 
                beforeclose:function(){this.destroy();}
            }
        });     
    le_window.show();
    le_window.setPosition(le_window.getPosition.x,50);
    
}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>在线抽签</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    
    <link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="resource/base.css">
    <link rel="stylesheet" type="text/css" href="resource/index.css">
    
    <script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
    <script type="text/javascript" src="ExtJS4/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="JS/index.js"></script>
  </head>
 
  <body>
 
   <div id="body_frame">
        <div id="top">        
        <div id="logo">vote online</div>
        <div id="user_area"><a id="lre_1"></a> | <a id="lre_2"></a></div>
        </div>   
        <div id="main">
        
        </div>   
        <div id="foot"> 
          copyright‌ @ 2011 vote onlie right reserved‌ 
        </div>  
   </div>   
  <div id="event_source"></div>
  </body>
</html>

body
{
    background-color:#FED
}

#body_frame
{
    width:1000px;
    height:650px;
    text-align:left; 
    margin:0 auto; 
}
#top
{
    width:1000px;
    height:100px;
    background-color:rgb(194,216,242);
    border-bottom-color: rgb(153,187,232);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
#main
{
    width:1000px;
    height:500px;
    background-color:#DFE8F6
}
#foot
{
    width:1000px;
    height:50px;
    background-color:rgb(194,216,242);
    border-top-color: rgb(153,187,232);
    border-top-width: 1px;
    border-top-style: solid;
    text-align: center;
}

#logo
{
    width:520px;
    height:98px;
    margin: 0px  0px 0px 10px;
    float:left;
    font-family: "Comic Sans MS", cursive;
    font-size: 72px;
    vertical-align:text-top;
}

#user_area
{
    margin:80px 10px 0px 0px;
    float:right;
    width:150px;
    height:20px;
    text-align: right;
}

 window里有tab，可是window关闭后再打开tabpanel的大小会不一样，效果在附件里，代码在这里：（看过ExtJS的书，可是没动手实践过）

 

 

Answer 1

index.js
里面 72行 ,id:'login_form' 删掉
101行 ,id:'register_form' 删掉
238行 ,id:'le_window' 删掉
以上删掉看看效果如何
如果删掉成功 那获得控件的方式可以不通过id的方式获得 换其他方式获得控件