Ext组件如何开发

案例效果

Ext组件如何开发

实现思路

1. 自己先开发一个Ext的组件
2. 把组件引入平台
3. 把组件配置在表单中

操作步骤

1. 下载前端项目
以前端开源项目为实例 jepaas-project-frontend https://gitee.com/ketr/jepaas-project-frontend
如果有源码就可以在前端插件项目进行开发

2. 自己先开发一个Ext的组件

3. 把组件引入平台
开发-》全局脚本库

4. 把组件配置在表单中

相关代码

开发一个Ext的组件

Ext.define('PRO.fielddome.view.FieldView', {
  extend: 'Ext.form.field.Text',
  alias: 'widget.fielddome.fieldview',//组件别名
  initComponent:function() {
    this.unitTpl = '<p>自定义组件</p>'
    this.callParent(arguments);
  },
});

把组件引入平台

(function(){
    //1.给数据字典加组件类型数据
    var datas= JE.dicListData['JE_FUNC_XTYPE'];
    var flag = true;
    Ext.each(datas,function(data){
        if(data.code == 'fielddome.fieldview'){
            flag = false;
            return false;
        }
    });
    if(flag){
        JE.dicListData['JE_FUNC_XTYPE'].push({backgroundColor: "",
            code: "fielddome.fieldview",//组件的别名
            icon: "",
            iconCls: "",
            id: "fielddome.fieldview",//组件的别名
            text: "40.自定义文本框组件",//组件的中文名称
            textColor: ""
        });
    }
    //加载组件js
    JE.loadScript('/pro/fielddome/view/FieldView.js');
})()

关键字，相关问题

• Ext组件开发