天天看点
返回

表单相关事件及案例

8年低代码创业，分享优秀低代码开发经验及技巧。

前几天介绍了列表的相关事件案例，事件能让我们在快速开发时提供极大的便利。那么表单事件有些呢？

公共事件(列表和表单均适用)

事件名称 事件说明
渲染(render) 组件渲染时触发
渲染前(beforerender) 组件渲染前触发
渲染后(afterrender) 组件渲染后触发
激活(activate) 组件初次进入时触发

事件触发顺序：

  • 初始化组件时事件触发顺序：渲染前>渲染>渲染后>激活>被激活（表单)
  • 组件刷新时事件触发顺序：渲染前>渲染>渲染后>被激活（表单）

公共事件在上一章节已作详细介绍，这里就不重复了。

表单事件(仅适用列表)

事件名称 事件说明
数据提交结束 (endsubmit) 数据保存操作完全结束后触发
数据提交前(beforesubmit) 数据保存之前触发
数据提交后(aftersubmit) 数据保存之后触发
被激活(selfactivate) 表单激活后触发
超链接(selfactivate) 点击文档的时候触发
标签超链接(labellinkclick) 点击lable（标签）的时候触发事件
设置值(setvalue) 给组件设置值的时候触发
值改变(change) 该组件值发生变化后触发
确定按钮(okbuttonclick) 点击窗体确定按钮触发
查询后(query) 点击窗体确定按钮完成后（赋值完成）触发
查询窗体初始化(sswinrender) 窗体渲染后触发
查询前(beforequery) 点击组件并且窗体未弹出之前触发
数据加载完(storeloaded) 组件列表数据加载完成后触发
数据项变化(recordchange) 组件列表数据发生添加和修改操作时触发
数据添加前(storebeforeadd) 组件列表数据添加操作前触发
数据添加(storeadd) 组件列表数据添加后触发
数据删除前(storebeforeremove) 组件列表数据删除前触发
数据删除(storeremove) 组件列表数据删除后触发
数据清空前(storebeforeremoveall) 组件列表数据批量删除前触发
数据清空(storeremoveall) 组件列表数据批量删除后触发

1、endsubmit（数据提交结束）

参数说明

参数名 类型 说明
form Ext.form.Panel 当前表单组件的对象
doAct String doSave(添加)/doUpdate(修改)
type String 操作类型，new(保存新建)
values Object 表单数据

示例

数据提交完成获取当前表单字段数据 
function(form,act,type,obj){
  var testMC = obj.TB1_MC;
}

2、beforesubmit（数据提交前）

参数说明

参数名 类型 说明
form Ext.form.Panel 当前表单组件的对象
doAct String doSave(添加)/doUpdate(修改)
type String 操作类型，new(保存新建)/copy(保存复制)/空(普通操作)

示例

表单字段A控制另一个字段B可输入值是否在允许范围内,不在范围内时给出提示，代码如下： 
function(form,act,type,obj){
    var QJSQ_QJLB_CODE = form.form.findField("QJSQ_QJLB_CODE").getValue();
    var cs = form.form.findField("QJSQ_CSCS").getValue();
    //如果请假类型是事假，并且cs 数字大于100的时候给提示
    if(QJSQ_QJLB_CODE =="1" && cs>100){
         JE.alert('长沙测试为100以内的数字');
         return false;
    }else{
        return true;
    }
}

3、aftersubmit（数据提交后）

参数说明

参数名 类型 说明
form Ext.form.Panel 当前表单组件的对象
doAct String doSave(添加)/doUpdate(修改)
type String 操作类型，new(保存新建)/copy(保存复制)/空(普通操作)
values Object 表单数据

示例

数据提交后，获取表单数据 
function(form,act,type,obj){
var value1 = form.form.findField("TB1_YESORNOTEST_CODE").getValue();
    if(act == 'doSave';){
        JE.alert("保存后事件");
    }
})

4、selfactivate（被激活）

参数说明

参数名 类型 说明
form Ext.form.Panel 当前表单组件的对象

示例

根据主键是否存在判断表单是否只读，在表单被激活事件中处理，代码如下： 
function(form){
    //获取主键
    var JE_DEMO_COURSE_ID=form.form.findField('JE_DEMO_COURSE_ID').getValue();
    //判断是否为空
    if(JE_DEMO_COURSE_ID !=''){
       form.setReadOnly(true);
    }else{
       form.setReadOnly(false);
    }
}

5、linkclick（超链接）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前组件对象

示例

表单相关事件及案例
表单相关事件及案例
JE.msg('超链接事件');

6、labellinkclick（标签超链接）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前组件对象

示例

表单相关事件及案例
表单相关事件及案例
JE.msg('标签超链接事件');

7、setvalue（设置值）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前组件对象
value String 该组件的值

示例

设置值完成后触发 
function(field, value){
    if(value == '1'){
      JE.alert("设置值");
    }
}

8、change（值改变）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前组件对象
value String 该组件的值
eOpts Object listener对象

示例

案例负责人值改变的时候吧值赋给案例描述
表单相关事件及案例
表单相关事件及案例
表单相关事件及案例
//获得表单组件
var form = field.up('jeformview');
//获得ALWD_ALMS字段组件对象
var ALWD_ALMS = form.form.findField('ALWD_ALMS');
//赋值
ALWD_ALMS.setValue(value);

9、okbuttonclick（确定按钮）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前表单组件的对象
sels Array 选中的数据
sswin Ext.window.Window 弹出窗体的对象

返回数据说明

boolean 如果返回false，不关闭窗体

示例

点击确定按钮弹出窗体
表单相关事件及案例
表单相关事件及案例
JE.msg('确定按钮事件！');
return true;

10、query（查询后）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前表单组件的对象
sels Array 选中的数据

返回数据说明

boolean 如果返回false，不关闭窗体

示例

弹窗选择数据确认后，执行查询后方法，里面可获取我们当前表单属性，也有选择数据的属性，也可从而给表单某些字段赋值 
function(field,sels){
    var JE_ZB_XMXX_ID = sels[0].data.JE_ZB_XMXX_ID; //取得选中数据的主键
    //通过项目信息的主键，去查询项目明细数据
    var icons = JE.ajax({url:"/je/load",params:{tableCode:'JE_ZB_XMMX',j_query: Ext.JSON.encode([{code:"JE_ZB_XMXX_ID",type:"=",value:JE_ZB_XMXX_ID}]),limit:-1}}).rows;
    //当前表单对象
    var form = field.up("jeformview");
    //获取子功能集合
    var child = form.down("childfuncfield[name=childfuncfield_1]");
    //获取到子功能集合grid
    var grid = child.grid;
    //把查询到的项目明细循环放到子功能集合列表上
    Ext.each(icons,function(data){
        //构建子功能集合列表数据默认值
        var xmmx = grid.funcData.getDefVals();
        //把查询到的子功能集合数据，赋值到构建的子功能默认数据中
        xmmx = Ext.applyIf(xmmx,data);
        //把数据赋值到子功能集合列表中
        var rec = grid.getStore().add(xmmx);
    });
}

11、sswinrender（查询窗体初始化）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前表单组件的对象
sswin Ext.window.Window 弹出窗体的对象

示例

动态的显示隐藏查询窗口grid中的列 
function(field,sswin){
    //获取到grid
    var  grid = sswin.down('[xtype=jedataview]').down('[xtype=jegridview]');
    //动态的隐藏列
    var  cloumeheader = grid.headerCt.getCmp('XMGL_XMYS').hide();

12、beforequery（查询前）

参数说明

参数名 类型 说明
field Ext.form.field.Field 当前表单组件的对象

示例

对查询选择弹出窗口中的数据进行过滤 
function(field){
    var form = field.up("jeformview");
    var XMXX_LXR = form.getValue("XMXX_LXR");   //立项人
    //判断立项人是否为空
    if(JE.isNotEmpty(XMXX_LXR)){
        //之前的写法
        //field.whereSql = "and XMXX_LXR = '"+XMXX_LXR+"'";
        //加密后的写法
        field.j_query =  '[{"type":"=","code":"XMXX_LXR","value":"'+XMXX_LXR+'","cn":"and"}]';
    }
}

13、recordchange（数据项变化）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
record Ext.data.Model 单前操作的数据对象
store Ext.data.Store 列表的数据集

示例

计算子功能集合中的数据，并将总和回显到主功能字段 
function(field,record,store){
    //通过字段找到表单   表单再找到汇总字段
    var form = field.up('panel[xtype=jeformview]');     //通过子功能集合字段找到当前表单
    var XMXX_XMJE = form.form.findField('ZHAUNYUN_TQ');    //主功能：项目金额

    var money ='';    //所有金额之和 PGG_XSJE
    //通过grid.store.each循环遍历子功能数据集
    store.each(function(itemData){
         money += itemData.data.PRODUCT_SPMC;  //子功能：项目明细金额
    })

    XMXX_XMJE.setValue(money);      //给合计字段项目金额：赋值合计的值
}

14、storebeforeadd（数据添加前）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
grid Ext.grid.Panel 组件中的grid对象

返回数据说明

boolean 如果返回false，中断添加操作

示例

数据添加前，为数据设置默认值 
function(field,grid){
    var form = field.up("jeformview");
    var HY_SFKQ_CODE=form.getFields("HY_SFKQ_CODE").getValue();
    if(HY_SFKQ_CODE=="0"){
        var SY_XMID = form.getFields("SY_XMID").getValue();     //项目ID
        var XM_NAME = form.getFields("XM_NAME").getValue();
        var XM_CODE = form.getFields("XM_CODE").getValue();

        var ddGrid = field.grid;
        var data = field.funcData.getDefVals();//构建子功能集合默认值
        data.SY_XMID = SY_XMID;
        data.XM_NAME = XM_NAME;
        data.XM_CODE = XM_CODE;
        var rec = ddGrid.getStore().add(data);
    }
     return true;
}

15、storeadd（数据添加）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
grid Ext.grid.Panel 组件中的grid对象
rec Ext.data.Model 单前操作的数据对象

示例

使用主功能数据给子功能集合中某一字段赋值 
function(field,grid,rec){
    var form = field.up("jeformview");
    //主表单字段值
    var  x = form.getValue("ZHAUNYUN_ZNCX");
    //循环给子功能集合某一个列赋值
    Ext.each(rec,function(item,index){
        item.set("PRODUCT_SPMC",x);
    });

16、storebeforeremove（数据删除前）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
grid Ext.grid.Panel 组件中的grid对象
rec Ext.data.Model 当前操作的数据对象

返回数据说明

boolean 如果返回false，中断删除操作

示例

对想要删除的数据进行判断，不符合条件的不能删除 
function(field,grid,rec){
    var flag = true;
    var data= JE.DATE.parseDateTime(rec.data.SY_CREATETIME);

    var newData =  new Date();
    if(data >= newData){
        flag = true;
    }else{
       flag = false;
       JE.msg('创建日期小于今天，数据不能删除');
    }
    return flag;
}

17、storeremove（数据删除）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
grid Ext.grid.Panel 组件中的grid对象
rec Ext.data.Model 单前操作的数据对象

示例

删除子功能集合数据时，计算删除数据的总金额，并把计算后的数据回显到主功能字段上 
function(field,grid,rec){
    //通过字段找到表单   表单再找到汇总字段
    var form = field.up('panel[xtype=jeformview]');
    var SBGL_GG = form.form.findField('SBGL_GG');
    var  SBGL_GGvalue =  form.form.findField('SBGL_GG').getValue();

    var money = 0;    //所有金额之和 PGG_XSJE
    //通过grid.store.each循环遍历子功能数据集
    Ext.each(rec,function(item,index){
        money  += item.data.KHGLLXR_LXRDH;
    });
    SBGL_GGvalue -= money
    SBGL_GG.setValue(SBGL_GGvalue);      //给合计字段项目金额：赋值合计的值
}

18、storebeforeremoveall（数据清空前）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
grid Ext.grid.Panel 组件中的grid对象
recs Array 单前操作的数据对象数组

返回数据说明

boolean 如果返回false，中断批量删除操作

示例

判断数据是否能删除，当包含不能删除的数据的时候给出提示 
function(field,grid,recs){
    var newData =  new Date();
    var flag = true;
    Ext.each(recs,function(item,index){
        var data= JE.DATE.parseDateTime(item.data.SY_CREATETIME);
        if(data <= newData){
            flag = false;
        }
    });
    if(!flag){
        JE.alert('有不能删除的数据');
    }
    return flag;
}

19、storeremoveall（数据清空）

参数说明

参数名 类型 说明
field JE.core.ux.form.ChildFuncField 当前表单组件的对象
grid Ext.grid.Panel 组件中的grid对象
recs Array 单前操作的数据对象数组

示例

删除子功能集合数据时，计算删除数据的总金额，并把计算后的数据回显到主功能字段上 
function(field,grid,recs){
    //通过字段找到表单   表单再找到汇总字段
    var form = field.up('panel[xtype=jeformview]');
    var SBGL_GG = form.form.findField('SBGL_GG');
    var  SBGL_GGvalue =  form.form.findField('SBGL_GG').getValue();

    var money = 0;    //所有金额之和 PGG_XSJE
    //通过grid.store.each循环遍历子功能数据集
    Ext.each(recs,function(item,index){
        money  += item.data.KHGLLXR_LXRDH;
    });
    SBGL_GGvalue -= money
    SBGL_GG.setValue(SBGL_GGvalue);      //给合计字段项目金额：赋值合计的值
}

想了解学习更多内容，欢迎关注。

上一篇: 图解 | 原来这就是线程池
下一篇: python3之turtle库学习（例：蟒蛇的Python绘制）