一、介绍

JEPaaS通用可视化脚本编写工具,抛弃 调试慢,页面要刷新,代码量巨大的JS编写方式,使用找到事件触发点,动作,直接注册来完成前端交互。

二、核心操作

  1. 注册一个元素的事件并且执行

  2. 获取功能表单,主窗体,表格,字段,表格列对象

  3. 结合平台API以及ExtJs的API对于组件的操作方法,事件查询

三、核心配置

  1. 平台API讲解

  2. 表单,表格,字段,表格列,按钮常用事件

    表单:
    afterrender
    selfactivate
    endsubmit
    beforesubmit

    表格:
    beforeload
    afterrender
    grid.store.on("update",function(){
    })

    字段:
    change
    beforerender
    afterrender
    beforequery
    query

    按钮:
    click
    beforeclick
  1. Ajax的高级使用
//同步请求
var result = JE.ajax({
    url:'',
    //text:true,//返回字符串,如果不配置,返回对象,默认false
    //timeout:30000,//请求超时时间,毫秒,默认30000毫秒
    params:{}
});
if(result.success){
    JE.msg('操作成功!');
}else{
    JE.alert(result.message)
}

//异步请求
JE.ajax({
    url:'',
    params:{},
    async:true,//异步
    success:function(response){
        var result = Ext.decode(Ext.value(response.responseText,'{}'))
        if(result.success){
        JE.msg('操作成功!');
        }else{
        JE.alert(result.message)
        }
    }
});
  1. 代码打开功能的高级使用
/**
   * 弹出窗体,显示功能
   * @param {} funcCode 功能编码
   * @param {} config 功能配置信息
   * @param {} config.readOnly 是否只读
   * @param {} config.funcPerm 使用功能权限,默认true
   * @param {} config.hideTbar 隐藏工具条
   * @param {} config.whereSql 过滤条件,附加到功能的原sql上
   * @param {} config.j_query 过滤条件,json对象传给后台  安全处理
   * @param {} config.values 传递的值,当Type=form,为表单的初始值,如果是普通功能,则被当作由主功能传过来的值
   * @param {} config.useChild 表单是否启用子功能
   * @param {} config.type 显示类型[form|grid],如果是form,只显示表单,如果是grid,将没有编辑按钮,如果为空,则显示功能全部
   * @param {} config.id 单条数据id值,表单用,如果配上,则会自动加载表单数据
   * @param {} config.formColseBtnHide 值为true去掉表单的关闭按钮
   */
  JE.showFunc(funcCode, config);
  1. 代码打开门户,图表报表的高级使用
组件 类名 xtype 核心参数
门户 JE.core.view.PortalView jeportalview beanId:””
图表 JE.core.view.ChartView jechartview chartCode:””
chartParams:{}
报表 JE.core.view.ReportView jereportview reportCode:””
reportParams:{}

以图表为例,其他组件操作一直

    //1. 自定义组件
    var panel = Ext.create('Ext.panel.Panel',{
        layout:'fit',
        items:{
            xtype:'jechartview'
            chartCode:'',  //图表编码
            chartParams:{} //图表参数
        }
    }

    //2. 实例对象使用
    var panel = Ext.create('Ext.panel.Panel',html:'<div id="app"></div>');
    var chart = Ext.create('JE.core.view.ChartView',{
        chartCode:'',  //图表编码
        chartParams:{} //图表参数
    })
    chart.render('app')

    //3. 配置信息使用
    var panel = Ext.create('Ext.panel.Panel',{layout:'fit'});
    var chartCfg = {
        xtype:'jechartview'
        chartCode:'',  //图表编码
        chartParams:{} //图表参数
    }
    panel.add(chartCfg);

    //4. 窗口调用
    JE.win({
        autoShow:true,
        items:[{
            xtype:'jechartview'
            chartCode:'',  //图表编码
            chartParams:{} //图表参数
        }]
    })
  1. 树形组件的代码引用及事件注册

树形组件

/**
 * 自定义功能树形面板
 */
Ext.define("PRO.demo.view.WestView", {
    /**
     * 继承平台的树形面板
     * @type String
     */
    extend: 'JE.core.view.TreeView',
    /**
     * 声明面板的xtype
     * 确保全局唯一,widget.是系统必带的前缀
     * 此类xtype的引用为:test.westview
     * @type String
     */
    alias: 'widget.demo.westview',
    multiSelect : false,//多选
    searchBar:true,//查询工具条
    useTools:false,//不启用工具条
    rootVisible : false,//不显示根节点
    onlyItem:true,//请求系统数据时的参数,只需要子项。默认true,以数组形式返回,false时,以根节点对象形式返回
    initComponent: function(){
        var me = this;
        /*
            三种获取树形数据的方法
            1.使用平台的字典项
                me.queryItems = [{title:'字典项的标题',field:'过滤的字段编码',configInfo:'字典编码'},可以配置多个...];
                me.onlyItem = false;
            2.获取自定功能的数据
                me.url = '/je/dynaAction!getTree.action'||'自己的链接';
                me.onlyItem = true;
                me.params = {tableCode:'表名',whereSql:'过滤条件',orderSql:'排序条件'};
            3.直接设置树形的root节点数据
                me.rootData = {id:'ROOT',text:'ROOT',children:[]}
        */
        me.queryItems = [{title:'性别',field:'GENDER',configInfo:'JE_SEX'}];
        me.onlyItem = false;

        me.callParent(arguments);

    }
});

事件注册

/**
 * 自定义功能主控制器
 */
Ext.define("PRO.demo.controller.MainController", {
    extend: 'Ext.app.Controller',
    init:function(){
        //如果有多个控制器,可以在此加载
        //JE.initCtr('PRO.test.controller.Main1Controller');
        //JE.initCtr('PRO.test.controller.Main2Controller');
        //...;

        var self = this;
        var ctr={
            /**
             * 绑定树形节点选中事件
             */
            'panel[xtype=demo.westview]':{
                selectionchange:function(selM,sels){
                    var mainview = selM.view.ownerCt.mainview,//主面板
                        centerview = mainview.centerview;//数据面板
                    //组装sql
                    var sqls = {};
                    Ext.each(sels,function(sel){
                        if(sel.get('nodeType') != 'ROOT'){
                            var value = sel.get('code'),
                                field = sel.get('nodeInfo'),
                                type = 'in';
                            sqls[field] = sqls[field] || {code:field,type:type,value:[]};
                            sqls[field].value.push(value);
                        }
                    });
                    //拼接sql
                    var sql = '';
                    Ext.iterate(sqls,function(key,field){
                        sql += ' AND '+JE.DB.buildWhereSql(field);
                    });
                    //设置sql
                    JE.DB.setWhereSql(centerview.store,sql,'tree');
                    //查询
                    centerview.store.loadPage(1);
                }
            }
        }
        self.control(ctr);
    },
    views:[
        //加载引用的面板
        'PRO.demo.view.MainView',
        'PRO.demo.view.WestView',
        'PRO.demo.view.CenterView'
    ]
});

四、常见开发问题

  1. 使用 getFunc(功能编码) 拿到的功能信息为空

  2. 字符串的常用方法及使用

  3. 日期工具类的介绍及使用

  4. 查询选择,树形选择,查询前后事件的高级使用

  5. 变量传递的高级使用,如复制剪切的应用场景

  6. 怎么开发自定义插件

  7. 四种绑定事件以及触发的方法以及业务场景

最后编辑: 肖海杰  文档更新时间: 2024-07-05 09:35   作者:肖海杰