Extjs 一个formpanel小例子

参考网上的例子和api，写的一个小例子，供个人学习用~ 涉及到textField，radio，combox，checkbox，datefield，password，timefield，textarea，以及vtype的使用，下面是js：
Ext.onReady(function(){
 Ext.QuickTips.init();//信息提示初始化
 Ext.form.Field.prototype.msgTarget="side";//设置控件的错误信息显示位置，主要可选的位置有：qtip,title,under,side,[elementId]
 Ext.BLANK_IMAGE_URL="ext/resources/images/default/s.gif";//替换图片文件为本地
 var myform=new Ext.FormPanel({
  renderTo:document.body,//渲染到body
  labelAlign:"left",//label默认为左对齐
  buttonAlign:"right",//button默认为右对齐
  title:"表单例子",//form的标题
  bodyStyle:"padding:5px",//设置样式
  width:600,//设置宽度
  frame:true,//这个属性api有 没看明白 但是去掉之后样式惨不忍睹 还是加上吧
  labelWidth:80,//标签宽度
  items:[{//子项
   layout:"column",//这里用column布局方式 将控件在一行显示 可选值有很多 参考api
   border:false,//无边框
   labelSeparator:"：",//label分隔符 用中文的：分隔
   items:[{
    columnWidth:.5,//0.5 也就是占据一半的宽度
    layout:"form",//form布局方式
    border:false,
    items:[{
     xtype:"textfield",//文本框
     fieldLabel:"姓名",
     anchor:"90%",//宽度百分比
     name:"name"//name为页面控件的属性 如果需要往后台传递数据 必须用hiddenName
    }]
   },{
    columnWidth:.25,
    layout:"form",
    border:false,
    items:[{
     xtype:"radio",
     fieldLabel:"性别",
     boxLabel:"男",
     name:"man",
     inputValue:"1",//类似dom中的value属性
     anchor:"95%",
     checked:true
    }]
   },{
    columnWidth:.25,
    layout:"form",
    border:false,
    labelWidth:0,
    labelSeparator:'',//因为这里只需要一个label就可以了 上面设置过了 下面就可以为空了
    hideLabels:true,//隐藏label
    items:[{
     xtype:"radio",
     fieldLabel:'',
     boxLabel:"女",
     inputValue:"2",
     name:"man",
     anchor:"95"
    }]
   }]
  },{
   layout:"column",
   border:false,
   labelSeparator:"：",
   items:[{
    layout:"form",
    columnWidth:.5,
    items:[{
     xtype:"datefield",
     fieldLabel:"出生日期",
     name:"birthday",
     anchor:"90%"
    }]
   },{
    layout:"form",
    columnWidth:.5,
    items:[{
     xtype:"combo",
     fieldLabel:"学历",
     blankText:"请选择学历",
     emptyText:"选择学历",
     mode:"local",//本地数据 如果是向后台发请求 则是remote
     store:new Ext.data.SimpleStore({//数据源
      fields:["name","value"],
      data:[["高中","1"],["本科","2"],["研究生","3"],["博士生","4"],["外星人","5"]]
     }),
     displayField:"name",
     valueField:"value",
     forceSelection:false,//必须选择一个选项
     triggerAction:"all",//如果不设置为all 那么在第一次选择完后 再次选择就只有第一次选择的选项了
     hiddenName:"xueli",
     editable:false,//下拉框是否可输入
     allowBlank:false,
     anchor:"90%"
    }]
   }]
  },{
   layout:"column",
   border:false,
   labelSeparator:"：",
   items:[{
    columnWidth:.35,
    layout:"form",
    border:false,
    items:[{
     xtype:"checkbox",
     fieldLabel:"权限组",
     boxLabel:"系统管理员",
     name:"quanxian",
     checked:true,
     inputValue:"1",
     anchor:"95%"
    }]
   },{
    columnWidth:.2,
    layout:"form",
    hideLabels:true,
    labelWidth:0,
    labelSeparator:"",
    border:false,
    items:[{
     xtype:"checkbox",
     name:"quanxian",
     fieldLabel:"",
     inputValue:"2",
     boxLabel:"管理员",
     anchor:"95%"
    }]
   },{
    columnWidth:.2,
    layout:"form",
    border:false,
    hideLabels:true,
    labelSeparator:"",
    labelWidth:0,
    items:[{
     xtype:"checkbox",
     name:"quanxian",
     fieldLabel:"",
     boxLabel:"普通用户",
     anchor:"95%",
     inputValue:"3"
    }]
   },{
    columnWidth:.25,
    border:false,
    layout:"form",
    hideLabels:true,
    labelSeparator:"",
    labelWidth:0,
    items:[{
     xtype:"checkbox",
     fieldLabel:"",
     boxLabel:"访客",
     inputValue:"4",
     name:"quanxian",
     anchor:"95%"
    }]
   }]
  },{
   layout:"column",
   border:false,
   labelSeparator:"：",
   items:[{
    columnWidth:.5,
    layout:"form",
    border:false,
    items:[{
     xtype:"textfield",
     allowBlank:false,
     blankText:"电子邮件不能为空",
     name:"email",
     vtype:"email",//这个属性的v 个人感觉是valid的意思 也就是 验证类型的意思 其他的还有 email、url、alpha和alphanum四种类型数据格式，email和url这个不用介绍了，呵呵。alpha是字母和下划线的组合，alphanum是字母、下划线和数字的组合。
     anchor:"90%",
     fieldLabel:"电子邮件"
    }]
   },{
    columnWidth:.5,
    layout:"form",
    border:false,
    items:[{
     xtype:"textfield",
     allowBlank:false,
     blankText:"请输入您的主页地址",
     name:"zhuye",
     vtype:"url",
     fieldLabel:"主页地址",
     anchor:"90%"
    }]
   }]
  },{
   xtype:"tabpanel",
   plain:true,
   activeTab:0,
   height:235,
   defaults:{
    bodyStyle:"padding:10px"
   },
   items:[{
    title:"登录信息",
    layout:"form",
    defaults:{
     width:230
    },
    defaultType:"textfield",
    items:[{
     fieldLabel:"登录名",
     name:"username",
     width:250,
     vtype:"alphanum",
     allowBlank:false,
     blankText:"请输入用户名"
    },{
     inputType:"password",
     name:"password",
     width:250,
     fieldLabel:"密码",
     allowBlank:false,
     blankText:"请输入密码"
    }]
   },{
    title:"数字时间字母",
    layout:"form",
    defaults:{
     width:230
    },
    defaultType:"textfield",
    items:[{
     xtype:"numberfield",
     fieldLabel:"数字",
     name:"shuzi",
     width:250,
     allowBlank:false,
     blankText:"请输入数字"
    },{
     xtype:"timefield",//和datefield不一样 这个是单纯选择时间的 也就是时分
     name:"shijian",
     width:250,
     allowBlank:false,
     blankText:"请输入时间",
     fieldLabel:"时间"
    },{
     name:"chunzimu",
     vtype:"alpha",
     fieldLabel:"字母下划线",
     allowBlank:false,
     width:250,
     blankText:"请输入字母或下划线"
    }]
   },{
    title:"纯文本",
    layout:"fit",
    def
4000
aults:{
     width:230
    },
    defaultType:"textfield",
    items:[{
     xtype:"textarea",
     name:"chunwenben",
     fieldLabel:""
    }]
   }]
  }],
  buttons:[{
   text:"保存",
   handler:function(){
    //if(myform.form.isValid()){
     //....会触发可看控件的blank检查 为空则有提示 tabpanel只会检查当前可见的tab选项卡
    //}
    myform.form.doAction("submit",{//提交方法 虽然语法不同 都是一个意思 以post方式提交数据到后台
     url:"",
     method:"post",
     params:{},
     success:function(form,action){
     
     },
     failure:function(form,action){
     
     }
    });
   }
  },{
   text:"取消",
   handler:function(){
    Ext.Msg.alert("提示信息","按下了取消按钮",function(){
     myform.form.reset();//清空所有form里的控件的值
    });
   }
  }]
 });
});