|
本帖最后由 凯特-姚帅龙 于 2022-4-18 21:35 编辑
JEPaaS低代码开发平台门户引擎之自定义模块
一、实现效果
在门户常用的场景中会涉及到多个图表报表规划在同一个门户中,这时候虽然图表报表提供了单个图表或报表的查询,但是这时候需要一个统一的搜索框来满足所有的条件,这时候就可以采用本方案解决。效果如下:
二、实现思路
1.配置图表报表(本章没有教程)
2.创建门户,配置门户中的框架及板块
3.使用自定义板块完成自定义搜索框
三、具体操作
文字描述,可以配图。
1.配置门户的框架
2.配置门户的板块(自定义)
3.编写自定义搜索框的代码
4.配置搜索框的高度
四、相关代码
- /*
- 自定义组件
- 返回Ext组件或者组件配置项,如:Ext.create("Ext.form.Panel",{})或者{xtype:"form"}
- */
- function(){
- //使用Ext创建一个form表单
- var f = Ext.create('Ext.form.Panel', {
- width: '100%',
- layout: 'hbox',
- border: 0,
- defaults: {
- labelWidth: 50,
- labelAlign:'right',
- width: 200,
- },
- defaultType: 'textfield',
- //表单的内容
- items: [{
- xtype:'hidden',
- name:'XM_ID'
- },{
- xtype:'ssfield',
- fieldLabel: '项目',
- name: 'XM_NAME',
- width:300,
- whereSql:"",
- configInfo:'功能编码,XM_NAME~XM_CODE~XM_ID,XM_NAME~XM_CODE~XM_ID,M',
- otherConfig:Ext.encode({queryField:'XM_NAME,XM_CODE',
- showField:'XM_NAME,XM_CODE'})
- },{
- xtype:"hidden",
- fieldLabel:"项目编码",
- readOnly:true,
- name:"XM_CODE"
- },{
- xtype:'cbbfield',
- fieldLabel:'部门',
- name:'DEPTNAME',
- configInfo:"字典编码,DEPTNAME~DEPTCODE,text~code,S"
- },{
- xtype:'hidden',
- fieldLabel:'部门',
- name:'DEPTCODE',
- width: 100
- },{
- xtype:'vueuserfield',
- fieldLabel:'执行人',
- name:'GZRW_FZR_NAME',
- configInfo:"JE_CORE_QUERYUSER,GZRW_FZR_NAME~GZRW_FZR_ID,USERNAME~USERID,S"
- },{
- xtype:'hidden',
- fieldLabel:'执行人',
- name:'GZRW_FZR_ID',
- width: 100
- },{
- xtype:'rangedatefield',
- fieldLabel: '要求完成日期',
- labelWidth:100,
- name: 'RWFJ_YQWCRQ',
- width:300
- },{
- xtype:'button',
- text:'查询',
- margin:'0 5',
- cls: 'btn JEPLUS_B_L10',
- width: 70,
- iconCls:'jeicon jeicon-search',
- handler:function(btn){
- //获取到表单对象
- var form = btn.up('form');
- //获取到门户对象
- var portalview=form.up("jeportalview");
- if(!portalview){
- portalview=form.up("panel[ref=__portalview]");
- }
- //通过门户获取到下边需要刷新的图表
- var cgBmChartView=portalview.down("jechartview[chartCode=图表编码]");
- var cgZbChartView=portalview.down("jechartview[chartCode=图表编码]");
- //通过门户获取到下边需要刷新的功能列表
- var cgGridView=portalview.down("grid");
- //获取到门户表单的内容
- var vals=form.form.getValues();
- if(cgBmChartView){
- //调用门户的刷新,并将门户表单内容传递
- cgBmChartView.load(vals);
- }
- if(cgZbChartView){
- cgZbChartView.load(vals);
- }
- if(cgGridView){
- cgGridView.params=vals;
- cgGridView.store.loadPage(1);
- }
- }
- },{
- xtype:'button',
- text:'重置',
- width: 70,
- cls: 'btn',
- iconCls:'jeicon jeicon-turn-left',
- handler:function(btn){
- this.up('form').getForm().reset();
- }
- }
- ]
- });
- return f;
- }
复制代码
五、总结
通过自定义的板块加Ext可以实现多种复杂的页面
六、关键字
门户引擎,自定义搜索框,自定义
|
|