Ext中窗体第二次点击报错或者其内控件不显示的问题,弄了2天才解决,记录下
registerPanel.js:
1 registerPanel = new Ext.form.FormPanel({ 2 id:'registerPanel', 3 layout:'form', 4 autoHeight:true, 5 autoWidth :true, 6 fileUpload:true, 7 enctype:'multipart/form-data', 8 items:[{ 9 xtype:'textfield', 10 fieldLabel:' 会员名', 11 allowBlank:false, 12 blankText:'请输入会员名', 13 maxLength:10,//???????????????????????????????如何让长度超出范围后出现提示未实现 14 name:'name', 15 id:'name', 16 anchor:'90%' 17 },{ 18 xtype:'textfield', 19 inputType:'password', 20 //width:200, 21 anchor:'90%' ,// 输入框的长度为列宽减去标题的宽度后的90%(anchor:'90%'),余下的10%的是给显示错误信息图标用的。 22 allowBlank:false, 23 blankText:'请输入密码', 24 name:'password', 25 id:'password', 26 fieldLabel:' 密码' 27 },{ 28 xtype:'textfield', 29 inputType:'password', 30 //width:200, 31 anchor:'90%',// 输入框的长度为列宽减去标题的宽度后的90%(anchor:'90%'),余下的10%的是给显示错误信息图标用的。 32 allowBlank:false, 33 blankText:'请确认密码', 34 name:'confirmPassword', 35 id:'confirmPassword', 36 fieldLabel:' 确认密码', 37 invalidText:'两次密码不一致', 38 validator:function(){ 39 //经过自己验证,下面的get得到是id 40 if(Ext.get('password').dom.value == Ext.get('confirmPassword').dom.value){ 41 return true; 42 }else{ 43 return false; 44 } 45 } 46 },{ 47 fieldLabel:' 性别', 48 xtype:"panel", 49 frame:true,//背景色透明加了以后就没有白色框框了 50 //background:transparent, 51 layout:"column",//定义每列中只有一个控件 52 anchor:'90%', 53 items:[{ 54 columnWidth:.40,//占这一列的25% 55 xtype:'radio', 56 //width:100, 57 boxLabel:'男', 58 name:'sex', 59 checked:true,//默认已选 60 inputValue:'男'//控件的值 61 //anchor : '40%' 62 },{ 63 columnWidth:.40, 64 xtype:'radio', 65 //hideLabels:true,// 第二个raido控件的列设置就有所不同,因为它不需要标题,所以要设置隐藏标题 66 //fieldLabel:'', 67 boxLabel:'女', 68 name:'sex', 69 inputValue:'女' 70 //anchor:'40%' 71 }] 72 },{ 73 xtype:'textfield', 74 fieldLabel:' QQ', 75 name:'QQ', 76 id:'QQ', 77 anchor:'90%' 78 },{ 79 xtype:'textfield', 80 fieldLabel:' 电话', 81 name:'phone', 82 id:'phone', 83 anchor:'90%', 84 allowBlank:false, 85 blankText:'电话不能为空', 86 regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,//???????????????????验证未实现 87 regexText : '移动电话号码格式输入错误!' 88 },{ 89 xtype:'textfield', 90 fieldLabel:' 邮箱', 91 name:'email', 92 id:'email', 93 anchor:'90%', 94 regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, 95 regexText : '电子邮件格式错误!'//验证错误之后的提示信息 96 },{ 97 xtype:'textfield', 98 fieldLabel:' 宿舍号', 99 name:'address', 100 id:'address', 101 anchor:'90%' 102 },{ 103 xtype:'textfield', 104 name:'membphoto', 105 inputType:'file', 106 fieldLabel:' 上传头像', 107 labelAlign:'right', 108 anchor:'90%' 109 //border:false 110 }], 111 buttonAlign: 'center', 112 buttons:[{ 113 text:'提交', 114 handler:function(){ 115 Ext.MessageBox.alert("提交"); 116 } 117 },{ 118 text:'取消', 119 handler:function(){ 120 Ext.getCmp("registerWindow").hide(); 121 } 122 123 }] 124 })
页面<javascript>中如下:
1 function register(){ 2 if(Ext.getCmp('registerWindow')) 3 { 4 Ext.getCmp('registerWindow').show(); 5 return; 6 } 7 var registerWindow = new Ext.Window({ 8 //xtype:'window', 9 id:'registerWindow', 10 title:'会员注册', 11 height:320, 12 width:340, 13 modal:true, //True 表示为当window显示时对其后面的一切内容进行遮罩 (默认为false) 14 resizable:false,//True 表示为允许用户从window的四边和四角改变window的大小(默认为 true) 15 //labelWidth:80,//表单布局Lable与文本框之间的距离 16 //bodyStyle:'padding:5px',//制定body元素的css样式 17 plain:true, 18 //autoDestroy : false, 19 closeAction:'hide', 20 items:registerPanel 21 }); 22 registerWindow.show(); 23 }
改为如上红色部分就可以解决了,profect!!