Ext form

最新推荐文章于 2024-09-24 09:03:08 发布

tanhaiwen

最新推荐文章于 2024-09-24 09:03:08 发布

阅读量93

点赞数

分类专栏： Ext3.2 文章标签： EXT Ajax json C C++

本文链接：https://blog.csdn.net/tanhaiwen/article/details/83805379

版权

Ext3.2 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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> 物料编码：</td>
   <td><input type="text" id="marcNo" style="width: 180px;"></td>
   <td> 品名：</td>
   <td><input type="text" id="marcName" style="width: 100px"></td>
   <td> 创建时间：</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> 物料描述：</td>
   <td><input type="text" id="marcDesc" style="width: 180px"></td>
   <td> 状态：</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> 类别：</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());
       }
      }
    });

//制定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("提示","操作成功");
                        }
                    });
                }