ext js 控件显示隐藏/与表单布局

if(Ext.getCmp('frm1').hidden){           
            Ext.getCmp('frm1').setVisible(true);
            alert("显示"+Ext.getCmp('frm1').hidden); 
        }else{           
            Ext.getCmp('frm1').setVisible(false);
            alert("隐藏"+Ext.getCmp('frm1').hidden); 
        }

 

 

/****************************************************/

 


        <script type="text/javascript">
        Ext.onReady(function(){
          Ext.QuickTips.init();
          var form=new Ext.FormPanel({
            frame:true,
            width:550,
            monitorValid:true,//把有formBind:true的按钮和验证绑定
            layout:"form",
            labelWidth:55,
            title:"添加个人信息",
            labelAlign:"right",
            renderTo:Ext.getBody(),
            submit: function(){
                            this.getEl().dom.action =
        'GetForm.aspx',
                            this.getEl().dom.method='POST',
                            this.getEl().dom.submit();
                      },
            items:[{
                      xtype:"panel",
                      layout:"column",
                      fieldLabel:"用户名",
                      isFormField:true,
                      items:[{
                                columnWidth:.5,
                                xtype:"textfield",
                                allowBlank:false,
                                blankText:"不能为空,请填写",
                                name:"UserName",
                                anchor:"90%"
                      },{
                                columnWidth:.20,
                                layout:"form",
                                labelWidth:40,
                                labelAlign:"right",
                                items:[{
                                          xtype:"radio",
                                          fieldLabel:"性别",
                                          boxLabel:"男",
                                          name:"Sex",
                                          checked:true,
                                          inputValue:"man",//这里如果用value,值是on,所以用inputValue(出现这种情况的是radio,checkbox)
                                          anchor:"95%"
                                }]
                      },{
                                columnWidth:.30,
                                layout:"form",
                                labelWidth:1,//让标签宽度为很小的值(奇怪的是为0时反而不行)
                                items:[{
                                          xtype:"radio",
                                          boxLabel:"女",
                                          labelSeparator:"",//去除分隔符“:”
                                          name:"Sex",
                                          inputValue:"woman",
                                          anchor:"95%"
                                }]
                      }]
            },{//上面是第一行
                      xtype:"panel",
                      layout:"column",
                      fieldLabel:"出生日期",
                      isFormField:true,
                      items:[{
                                columnWidth:.5,
                                xtype:"datefield",
                                name:"BirthDate",
                                anchor:"90%"
                      },{
                                columnWidth:.5,
                                layout:"form",
                                labelWidth:40,//注意,这个参数在这里可以调整简单fieldLabel的布局位置
                                items:[{
                                          xtype:"combo",
                                          name:"Degree",
                                          fieldLabel:"学位",
                                          store:["小学","初中","高中","专科","本科","硕士","博士"],
                                          emptyText:"请选择适合你的学历",
                                          anchor:"90%"
                                }]
                      }]
            },{//上面是第二行
                      xtype:"panel",
                      layout:"column",
                      isFormField:true,
                      fieldLabel:"使用框架",
                      items:[{
                                columnWidth:.2,
                                xtype:"checkbox",
                                boxLabel:"Spring.net",
                                name:"SpringNet",
                                inputValue:"spring"//这里如果用value,值是on,所以用inputValue
                      },{
                                columnWidth:.2,
                                layout:"form",
                                labelWidth:1,
                                items:[{
                                          xtype:"checkbox",
                                          boxLabel:"Nhibernate",
                                          labelSeparator:"",
                                          name:"NHibernate",
                                          inputValue:"nhibernate",
                                          anchor:"95%"
                                }]
                      },{
                                columnWidth:.6,
                                layout:"form",
                                labelWidth:1,
                                items:[{
                                          xtype:"checkbox",
                                          boxLabel:"Linq",
                                          labelSeparator:"",
                                          name:"Linq",
                                          inputValue:"linq",
                                          anchor:"95%"
                                }]
                      }]
                     
            },{//上面是第三行
                      xtype:"textfield",
                      fieldLabel:"Email",
                      name:"Email",
                      vtype:"email",//email验证,如果想自定义验证的话,请参见前面的文章
                      vtypeText:"email格式错误!",
                      anchor:"56%"//控制文本框的长度
                     
            },{//上面是第四行
                      xtype:"textarea",
                      fieldLabel:"个性签名",
                      name:"OneWord",
                      height:50,
                      anchor:"95%"
            },{//上面是第五行
                      xtype:"htmleditor",
                      fieldLabel:"想说的话",
                      name:"WantToSay",
                      anchor:"95%",
                      enableAlignments:false,//去除左右对齐工具栏
                      enableLists:false//去除列表工具栏
            }],
              buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
          });
          function login(){
                form.form.submit();
          }
          function reset(){
                form.form.reset();
          }
        });
               
       
       
       
       
        frm1.render(Ext.getBody());

       
       
    </script>
    <script type="text/javascript" src="user/check-radio.js"></script>
    <div id="form-ct"></div>
   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值