ExtJs 实现表单联动

简介: 最近做的项目使用Extjs。遇到表单联动的业务。下面来说说主要实现思想:说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象。比如地理位置的选定(例:浙江省-杭州市-某某县)。在这里,我将大范围的对象称为包含对象,大范围中的小对象称为被包含对象。

最近做的项目使用Extjs。遇到表单联动的业务。下面来说说主要实现思想:

说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象。比如地理位置的选定(例:浙江省-杭州市-某某县)。在这里,我将大范围的对象称为包含对象,大范围中的小对象称为被包含对象。

表单联动针对ComboBox(组合框)。在实现时,将包含对象传入被包含对象中,在后台查询被包含对象时,使用传入的包含对象的某个值(一般为被包含对象的外键)作为condition,查询与其相关的被包含对象。实现指定的被包含对象查询。

还有一点注意的是:在将大范围对象传入小对象后,使用js的监听机制,监听当小对象(组合框)要expand(展开)时,加载与其大范围对象相关的所有小对象。这里通过一个大范围对象的某个参数作为查询小对象的条件。两个对象一般存在外键关联的关系。

实例化表单的代码

var chejianObject = new ChejianBox("所属车间","chejianId"); //实例化车间
var banzuObject = new BanzuBox("班组","emp.banzuId",chejianObject); //实例化班组
banzuObject.on('expand', function(comboBox){
    var chejianId = Ext.getCmp("chejianValue所属车间").getValue();
    this.getStore().load({
        params: {
        chejianId: chejianId
    }
    });
});

定义表单的代码

//班组定义
BanzuBox = Ext.extend(Ext.form.ComboBox,{
    constructor: function(labelName,hiddenName, chejianObject){
        //与部门表进行级联操作
    chejianObject.on('select', function(comboBox){
        var value = comboBox.getValue();
        Ext.getCmp('banzuValue'+labelName).setRawValue('');
        banzuStore.reload({
                params: {chejianId: value}
        });
    });
    BanzuBox.superclass.constructor.call(this,{
        id: 'banzuValue'+labelName,
        fieldLabel: labelName,
        displayField: 'banzuName',
        valueField: 'banzuId',
        hiddenName: hiddenName,
        width: 100,
        emptyText: '请选择',
        height: 100,
        store: banzuStore,
        triggerAction: 'all', //显示所有
        editable: false,
        allowBlank: false,
        msgTarget: 'side',
        blankText: '请选择'
    });
    }
});
//车间定义
ChejianBox = Ext.extend(Ext.form.ComboBox,{
    chejianStore: null,
    //注意传入参数labelName,因为其作id的一部分,避免出现相同的id
    constructor: function(labelName, hiddenName){
        chejianStore = new Ext.data.JsonStore({
        autoLoad: true, //设为自动加载,以便实现修改时选中某值
        url:'chejian_show.action',
        fields: ['chejianId','chejianName']
        });
    ChejianBox.superclass.constructor.call(this,{
        id: 'chejianValue'+labelName,
        fieldLabel: labelName,
        displayField: 'chejianName',
        valueField: 'chejianId',
        emptyText: '请选择',
        hiddenName: hiddenName,
        width: 100,
        store: chejianStore,
        triggerAction: 'all', //显示所有
        editable: false,
        allowBlank: false,
        msgTarget: 'side',
        blankText: '请选择'
    });
    }
});
相关文章
|
JSON 移动开发 JavaScript
多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单
Vue 前端开发中,表单组件是排在前三的高频使用的组件,如何快速构建表单,节省力气,避免重复造轮子呢,选择一款适合自己的前端表单设计器就非常重要了。本文介绍 4 款顶级好用的 Vue 表单设计器,其中最后一款卡拉云,是新一代低代码开发工具,不仅能自动生成各类表单,还可以拖拽生成其他常见的前端组件,一行代码连接前后端数据,可快速接入数据库/api。它是表单设计器的超集,可直接生成属于你的后台管理工具,无敌好用。
3954 0
多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单
|
9月前
|
前端开发 Java
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
|
9月前
|
前端开发 Java
layui结合ajax实现下拉菜单联动效果
layui结合ajax实现下拉菜单联动效果
antdv动态表单组件
antdv动态表单组件
142 0
|
容器
ivx页面(3)轮播图的动态数据绑定实现以及轮播图点击跳转页面
ivx页面(3)轮播图的动态数据绑定实现以及轮播图点击跳转页面
276 0
|
前端开发 容器
宜搭子表单的css设置
可以通过css的方式修改宜搭子表单的字体,行高,行间距等,仅提供个人操作供参考,具体情况请亲自测试再评价测试
515 1
宜搭子表单的css设置
odoo 为form表单视图添加chatter功能
odoo 为form表单视图添加chatter功能
180 0
|
JavaScript
后台管理系统——03解决联动效果以及面包屑导航以及添加Echarts
解决联动效果以及面包屑导航以及添加Echarts
217 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
380 0
|
前端开发 JavaScript 数据安全/隐私保护
form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】
form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】
204 0
form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】