问题描述
/*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的书，可是没动手实践过） 问题补充：<div class="quote_title">小Flying 写道</div><div class="quote_div">index.js <br />里面 72行 ,id:'login_form' 删掉<br />101行 ,id:'register_form' 删掉<br />238行 ,id:'le_window' 删掉 <br />以上删掉看看效果如何 <br />如果删掉成功 那获得控件的方式可以不通过id的方式获得 换其他方式获得控件<br /><br /></div><br /><br /><br />真的是这样。不是ExtJS都会有分配一个默认id？为什么自己分配了id会导致效果走样？
解决方案
index.js 里面 72行 ,id:'login_form' 删掉101行 ,id:'register_form' 删掉238行 ,id:'le_window' 删掉 以上删掉看看效果如何 如果删掉成功 那获得控件的方式可以不通过id的方式获得 换其他方式获得控件
解决方案二：
使用extjs 我很少使用id属性 而且extjs 获得控件的方式有很多种方式
解决方案三：
tabpanel 加个布局layout:'fit' 填充模式