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!!

posted @ 2013-08-27 13:46  请叫我胖子  阅读(1291)  评论(0编辑  收藏  举报