extjs的form表单

Ext.onReady(function(){
 //提示信息初始化
 Ext.QuickTips.init();
 /*//创建一个窗口，将注册窗口放到里面去
 var panel = new Ext.Window({
  bodyStyle:"center",
  renderTo:Ext.getBody()
 });*/
 
 var jsons = [
              {cid:1,cname:"长沙"},
              {cid:2,cname:"株洲"},
              {cid:3,cname:"湘潭"},
              {cid:4,cname:"衡阳"}
             ];
 
 //创建代理
 var proxy1 = new Ext.data.MemoryProxy(jsons);
 
 var city = Ext.data.Record.create([
       {name:"cid",type:"int",mapping:"cid"},
       {name:"cname",type:"String",mapping:"cname"}
 ]);
 
 //创建reader
 var reader1 = new Ext.data.JsonReader({},city);
 
 //远程调用的JSON数据
 var reader = new Ext.data.JsonReader({},
   [{name:"username",type:"String",mapping:"username"},
   {name:"password",type:"String",mapping:"password"},
   {name:"sex",type:"String",mapping:"sex"},
   {name:"love",type:"String",mapping:"love"}]
 );
 //创建Store
 var store1 = new Ext.data.Store({
  proxy:proxy1,
  reader:reader1,
  autoLoad:true
 });
 
   var combobox = new Ext.form.ComboBox({
  //renderTo:Ext.getBody(),
  triggerAction:"all",
  store:store1,
  displayField:"cname",
  valueField:"cid",
  mode:"local",
  emptyText:"请选择湖南城市"
 });
 //panel的子类formPanel,做一个登录的窗口==================================================
 var formPanel = new Ext.form.FormPanel({
  //url:'',//表单提交的地址
  method:"post",
  baseParams:{extra:"中华人民共和国",id:100},//隐藏表单域传值
  defaultType:"textfield",//下面的items没有定义xtype属性时，默认为textfield
  title:"会员注册",//标题
  width:500,//宽度
  height:400,//高度
  bodyStyle:"padding:6px",//正文区域样式
  frame:true,
  labelAlign:"right",
  items:[
       //文本域
       new Ext.form.TextField({
          name:"username",
          allowBlank:false,
          width:200,
          fieldLabel:"用户名",
          labelAlign:"right"
          //regex:/^\w{6,}$/自定义的规则
         }),
      //密码域
         {
          name:"password",//密码
          width:200,
          allowBlank:false,//是否允许为空
          inputType:"password",//输入类型
          xtype:"textfield",//相当于new Ext.form.textField
          fieldLabel:"密码",//文本框提示信息
          labelAlign:"right"
         },
      //单选按钮组
      new Ext.form.RadioGroup({
          name:"sex",
         fieldLabel:"性别",
         items:[
              new Ext.form.Radio({
               name:"radSex",//单选按钮的属性
               checked:true,//是否被选中
               boxLabel:"男",//显示值
               inputValue:"man"//实际值
              }),
              new Ext.form.Radio({
               name:"radSex",//单选按钮的属性
               boxLabel:"女",
               inputValue:"woman"
              })
         ],
         width:100
        }),
      //复选框组
      new Ext.form.CheckboxGroup({
       name:"love",
       fieldLabel:"我的爱好",
       items:[
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"看EXT",
             inputValue:"girl",
             checked:true
            }), 
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"上网",
             inputValue:"internet"
            }),
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"钓鱼",
             inputValue:"fish"
            }),
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"打牌",
             inputValue:"card"
            })
       ],
       width:300
      }),
      //数字框
      new Ext.form.NumberField({
       fieldLabel:"最喜欢的数字",
       width:200,
       name:"numName"
      }),
       new Ext.form.TextField({
        name:"urladdress",
        allowBlank:false,
        width:200,
        fieldLabel:"个人喜欢的网站",
        labelAlign:"right",
        vtype:"url"
       
       }),
       new Ext.form.TextField({
        name:"email",
        width:200,
        allowBlank:false,
        fieldLabel:"个人邮箱",
        labelAlign:"right",
        vtype:"email"
       
       }),
      //下拉选项
      combobox
      ,
      //家庭地址，文本域
      new Ext.form.TextArea({
       name:"familyAddress",
       fieldLabel:"家庭地址",
       width:250,
       height:50
      }),
      //时间点选择器
      new Ext.form.TimeField({
       name:"workTime",
       xtype:"timefield",
       fieldLabel:"上班时间",
       increment:30,//增长间隔
       format:"H:i",//格式
       minValue:"6:00",//最小时间
       maxValue:"21:00"//最晚时间
      }),
      //在线编辑器
     /* new Ext.form.HtmlEditor({
       name:"htmlEdit",
       fieldLabel:"在线编辑器",
       height:150,
       enableLists:false,
       enableSourceEdit:false
      }),*/
      //上传文件域
      new Ext.form.TextField({
       name:"photo",
       fieldLabel:"上传照片",
       inputType:"file",
       width:"300px"
      })
  ],
  buttons:[{
   text:"用户注册",
   tooltip:"点击此按钮<br>进行用户注册",
   tooltipType:"qtip",
   handler:function(){
    var username = formPanel.getForm().findField("username").getValue();
    var password = formPanel.getForm().findField("password").getValue();
    Ext.MessageBox.alert("提示信息",username+"正在登录,密码为:"+password);
    //提交表单是以AJAX提交的(默认)
    /*formPanel.getForm().submit({
     success:function(){
     },
     failure:function(){
     }
    });*/
   }
  },{
   text:"重置",
   tooltip:"点击此按钮,<br>您填写的值将会被清空",
   tooltipType:"qtip",
   handler:function(){
       formPanel.getForm().reset();//重置表单
   }
  },{//用本地的数据初始化
   text:"本地数据",
   tooltip:"点击此按钮,<br>表格将会被本地数据初始化",
   tooltipType:"qtip",
   handler:function(){
    var json = {
      username:"朱湘鄂",
      password:"123123",
      sex:"woman",//单选按钮不支持中文
      love:"card"
    };
       formPanel.getForm().setValues(json);//重置表单
   }
  },{//用本地的数据初始化
   text:"远程数据",
   tooltip:"点击此按钮,<br>表格将会远程数据被初始化",
   tooltipType:"qtip",
   handler:function(){
       formPanel.getForm().reader = reader;//
       formPanel.load({url:"../formJson"});
   }
  }],
  buttonAlign:"center",
  renderTo:Ext.getBody()
 });
 
 
});