Ext form

 Ext中创建Form有两种方式，一种是使用Ext.form.BaseForm，另一种是使用Ext.form.FormPanel。
 1 使用Ext.form.BaseForm封装HTML原生的form：
 jsp页面：
<form  id="queryForm" action="" >
 <table cellpadding="2" cellspacing="1" >
  <tr>
   <td>&nbsp;物料编码：</td>
   <td><input type="text" id="marcNo" style="width: 180px;"></td>
   <td>&nbsp;品名：</td>
   <td><input type="text" id="marcName" style="width: 100px"></td>
   <td>&nbsp;创建时间：</td>
   <td><input id="startDate" type="text" name="startDate" style="width: 85px" ></td>
   <td style="text-align: center;">至</td>
   <td style="text-align: left;"><input id="endDate" type="text" name="endDate" style="width: 85px" ></td>
  </tr>
  <tr>
   <td>&nbsp;物料描述：</td>
   <td><input type="text"  id="marcDesc" style="width: 180px"></td>
   <td>&nbsp;状态：</td>
   <td>
    <select id="statusRmk" name="statusRmk">
     <option value="">请选择</option>
     <option value="1">正常使用</option>
     <option value="2">冻结状态</option>
     <option value="3">删除</option>
    </select>
   </td>
   <td>&nbsp;类别：</td>
   <td>
    <select id="marcKind" name="marcKind">
     <option value="">请选择</option>
     <option value="1" >类别1</option>
     <option value="2" >类别2</option>
     <option value="3" >类别3</option>
    </select>
   </td>
   <td colspan="2" style="text-align: right;padding-left: 5px;">
    <div id="toolBar"></div>
   </td>
  </tr>
 </table> 
</form> 
 js代码
<script>
 var queryForm,marcNo,marcDesc,marcName,statusRmk,marcKind,startDate,endDate;
 /**
 * 初始化ext Form
 */
 function initForm(){
  //物料编码  
  marcNo = new Ext.form.TextField({
      applyTo: 'marcNo',
      name: 'marcNo',
      allowBlank: true,
      maxLength: 20,
      width: 180,
      enableKeyEvents: true,
      listeners: {
       keyup: function(diviNo,e){
        marcNo.setValue(marcNo.getValue().toUpperCase());
       }
      }
     });
     //物料描述
  marcDesc = new Ext.form.TextField({
      applyTo: 'marcDesc',
      name: 'marcDesc',
      allowBlank: true,
      maxLength: 100,
      width: 180
  });
   //品名
  marcName = new Ext.form.TextField({
      applyTo: 'marcName',
      name: 'marcName',
      allowBlank: true,
      maxLength: 100,
      width: 100
     });
   //状态
  statusRmk = new Ext.form.ComboBox({
   transform: 'statusRmk',
   name: 'statusRmk',
   hiddenName: 'statusRmk',
         typeAhead: true,
         mode: 'local',
         editable: false,
         allowBlank: true,
         triggerAction: 'all',
         selectOnFocus: true,
         width: 100
  });
  //类别
  marcKind = new Ext.form.ComboBox({
   transform: 'marcKind',
   name: 'marcKind',
   hiddenName: 'marcKind',
         typeAhead: true,
         mode: 'local',
         editable: false,
         allowBlank: true,
         triggerAction: 'all',
         selectOnFocus: true,
         width: 85
  });
     //时间段-开始时间
     startDate = new Ext.form.DateField({
      id: 'startDate',
      applyTo: 'startDate',
      name: 'startDate',
      allowBlank: true,
      width: 85,
      format: 'Y/m/d',
      invalidText: '{0}不符合{1}的格式要求!',
      vtype: 'daterange',
      endDateField: 'endDate',
      altFormats: 'Y/m/d'
     });
     //时间段-结束时间
     endDate = new Ext.form.DateField({
      id: 'endDate',
      applyTo: 'endDate',
      name: 'endDate',
      allowBlank: true,
      width: 85,
      format: 'Y/m/d',
      invalidText: '{0}不符合{1}的格式要求!',
      listeners: {
       
      },
      vtype: 'daterange',
      startDateField: 'startDate',
      altFormats: 'Y/m/d'
     });
     
     queryForm = new Ext.form.BasicForm('queryForm'); //创建Form对象
  queryForm.add(marcNo,marcDesc,marcName,statusRmk,marcKind,startDate,endDate); //添加元素
 }
</script>
 2 使用Ext.form.FormPanel：
 jsp代码：
 <!-- 用户类型 -->
 <select id="userKind" name="userKind">
  <erpit:options key="USER_KIND" selectVal="${wuser.userKind}"></erpit:options>
 </select>
 js代码
 //制定form表单各个子项
  
 var userId=new Ext.form.Hidden({
      id : 'userId',
      name:'userId',
      value:'<c:out value="${wuser.id}" />'
     });
 var userNo=new Ext.form.TextField({
      id : 'userNo',
      name:'userNo',
      fieldLabel :'帐    号',
      value:'<c:out value="${wuser.userNo}" />',
         allowBlank: false,
         maxLength:20,
      listeners :{
       blur :function(userNo){  
        userNo.setValue(userNo.getValue().toUpperCase());
       }
      }
     });

 var userPassword=new Ext.form.TextField({
      id : 'userPassword',
      name:'userPassword',
      fieldLabel :'密    码'
     });
     
 var email=new Ext.form.TextField({
      id : 'email',
      name:'email',
      fieldLabel :'电子邮件',
         allowBlank: false,
         value:'<c:out value="${wuser.email}" />',
         maxLength:20,
      vtype:'email'
     });
     
 var memo=new Ext.form.TextArea({
      id : 'memo',
      name:'memo',
      fieldLabel :'备    注',
      value:'<c:out value="${wuser.memo}" />',
      width:400,
      height:100
     });
     
 var userKind=new Ext.form.ComboBox({
  transform:'userKind',
  id:'userKind',
  valueField:'no',
  fieldLabel :'用户类别',
                displayField:'desc',
                typeAhead: true,
             mode: 'local',
             editable: true,
             allowBlank: false,
             triggerAction: 'all',
             selectOnFocus: true
     });

 //制定form表单 
 var centerForm = new Ext.form.FormPanel({
      id:'centerForm',
      frame:true,
      labelAlign:'right',
      layout:'form',
      labelWidth:80,
      items:[userId,userNo,perNo,userName,userPassword,email,tel,userKind,memo]
     });

 

 

3 Ext form加载Record中的数据：form.loadRecord(record);采用此方法可以实现grid行中的数据与form关联。

 

4 Ext form提交

（1）采用Ext.Ajax.request提交

                       Ext.Ajax.request({
                            url: '<c:out value="${path}" />/wcolm.htm?method=saveData',
                            params: {
                                colId :colmId.getValue(), //Ext form组件
                                detailData:Ext.encode(dataArr)
                            },
                            success: function(response, options){
                                var rtnObj = Ext.util.JSON.decode(response.responseText);
                                if(rtnObj.success){  
                                    yyExt.info('系統提示',"资料保存成功!");
                                }else{
                                    yyExt.alert("系统提示","保存资料出错,"+unescape(rtnObj.info),"ERROR");
                                }
                            },
                            failure: function(response, options){
                                var rtnObj = Ext.util.JSON.decode(response.responseText);
                                yyExt.alert("系统提示","保存资料出错,"+unescape(rtnObj.info),"ERROR");
                                return false;
                            }                      
                        });

（2）采用Ext BaseForm的 submit方法

                if(centerForm.isValid()){
                    centerForm.submit({
                        method:"post",
                        url: '<c:out value="${path}" />/user.htm?method=userSave',
                        params:{
                            'data':Ext.encode(centerForm.getValues()), //这里后台取值 需要解析datajson字符串
                            'diviIds':indexFun.getAllDiviId(),
                            'roleIds':indexFun.getAllRoleId()
                        },
                        waitMsg:'Loading...',
                        failure:function(form,action){
                            if(action.result==null){
                                Ext.Msg.alert('提示',"保存失败");
                            }else{
                                Ext.Msg.alert('保存失败',action.result.info);
                            }
                        },
                        success: function(form,action){
                            yyExt.info("提示","操作成功");
                        }
                    });
                }