功能脚本引擎开发

一、介绍

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

3. 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)
        }
    }
});

4. 代码打开功能的高级使用

/**
   * 弹出窗体，显示功能
   * @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);

5. 代码打开门户，图表报表的高级使用

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

    //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:{} //图表参数
        }]
    })

6. 树形组件的代码引用及事件注册

树形组件

/**
 * 自定义功能树形面板
 */
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. 四种绑定事件以及触发的方法以及业务场景