【经验分享】JEPaaS门户中自定义一个搜索框

凯特-姚帅龙

JEPaaS低代码开发平台门户引擎之自定义模块
一、实现效果
在门户常用的场景中会涉及到多个图表报表规划在同一个门户中，这时候虽然图表报表提供了单个图表或报表的查询，但是这时候需要一个统一的搜索框来满足所有的条件，这时候就可以采用本方案解决。效果如下：


二、实现思路
1.配置图表报表(本章没有教程)
2.创建门户，配置门户中的框架及板块
3.使用自定义板块完成自定义搜索框
三、具体操作
文字描述，可以配图。
1.配置门户的框架

2.配置门户的板块(自定义)

3.编写自定义搜索框的代码

4.配置搜索框的高度

四、相关代码

1. /*
   
2. 自定义组件
   
3. 返回Ext组件或者组件配置项,如:Ext.create("Ext.form.Panel",{})或者{xtype:"form"}
   
4. */
   
5. function(){
   
6.         //使用Ext创建一个form表单
   
7.     var f = Ext.create('Ext.form.Panel', {
   
8.         width: '100%',
   
9.         layout: 'hbox',
   
10.         border: 0,
    
11.         defaults: {
    
12.             labelWidth: 50,
    
13.             labelAlign:'right',
    
14.             width: 200,
    
15.         },
    
16.         defaultType: 'textfield',
    
17.                 //表单的内容
    
18.         items: [{
    
19.                 xtype:'hidden',
    
20.                 name:'XM_ID'
    
21.             },{
    
22.                 xtype:'ssfield',
    
23.                 fieldLabel: '项目',
    
24.                 name: 'XM_NAME',
    
25.                 width:300,
    
26.                 whereSql:"",
    
27.                 configInfo:'功能编码,XM_NAME~XM_CODE~XM_ID,XM_NAME~XM_CODE~XM_ID,M',
    
28.                 otherConfig:Ext.encode({queryField:'XM_NAME,XM_CODE',
    
29.                                         showField:'XM_NAME,XM_CODE'})
    
30.             },{
    
31.                 xtype:"hidden",
    
32.                 fieldLabel:"项目编码",
    
33.                 readOnly:true,
    
34.                 name:"XM_CODE"
    
35.             },{
    
36.                 xtype:'cbbfield',
    
37.                 fieldLabel:'部门',
    
38.                 name:'DEPTNAME',
    
39.                 configInfo:"字典编码,DEPTNAME~DEPTCODE,text~code,S"
    
40.             },{
    
41.                 xtype:'hidden',
    
42.                 fieldLabel:'部门',
    
43.                 name:'DEPTCODE',
    
44.                 width: 100
    
45.             },{
    
46.                 xtype:'vueuserfield',
    
47.                 fieldLabel:'执行人',
    
48.                 name:'GZRW_FZR_NAME',
    
49.                 configInfo:"JE_CORE_QUERYUSER,GZRW_FZR_NAME~GZRW_FZR_ID,USERNAME~USERID,S"
    
50.             },{
    
51.                 xtype:'hidden',
    
52.                 fieldLabel:'执行人',
    
53.                 name:'GZRW_FZR_ID',
    
54.                 width: 100
    
55.             },{
    
56.                 xtype:'rangedatefield',
    
57.                 fieldLabel: '要求完成日期',
    
58.                 labelWidth:100,
    
59.                 name: 'RWFJ_YQWCRQ',
    
60.                 width:300
    
61.             },{
    
62.                 xtype:'button',
    
63.                 text:'查询',
    
64.                 margin:'0 5',
    
65.                 cls: 'btn JEPLUS_B_L10',
    
66.                 width: 70,
    
67.                 iconCls:'jeicon jeicon-search',
    
68.                 handler:function(btn){
    
69.                                         //获取到表单对象
    
70.                     var form = btn.up('form');
    
71.                                         //获取到门户对象
    
72.                     var portalview=form.up("jeportalview");
    
73.                     if(!portalview){
    
74.                         portalview=form.up("panel[ref=__portalview]");
    
75.                     }
    
76.                                         //通过门户获取到下边需要刷新的图表   
    
77.                     var cgBmChartView=portalview.down("jechartview[chartCode=图表编码]");
    
78.                     var cgZbChartView=portalview.down("jechartview[chartCode=图表编码]");
    
79.                                         //通过门户获取到下边需要刷新的功能列表
    
80.                     var cgGridView=portalview.down("grid");
    
81.                                         //获取到门户表单的内容
    
82.                     var vals=form.form.getValues();
    
83.                     if(cgBmChartView){
    
84.                                                 //调用门户的刷新，并将门户表单内容传递
    
85.                         cgBmChartView.load(vals);
    
86.                     }
    
87.                     if(cgZbChartView){
    
88.                         cgZbChartView.load(vals);
    
89.                     }
    
90.                     if(cgGridView){
    
91.                         cgGridView.params=vals;
    
92.                         cgGridView.store.loadPage(1);
    
93.                     }         
    
94.                 }
    
95.             },{
    
96.                 xtype:'button',
    
97.                 text:'重置',
    
98.                 width: 70,
    
99.                     cls: 'btn',
    
100.                 iconCls:'jeicon jeicon-turn-left',
     
101.                 handler:function(btn){
     
102.                     this.up('form').getForm().reset();
     
103.                 }
     
104.             }
     
105.         ]      
     
106.     });
     
107.     return f;
     
108. }

复制代码

五、总结

通过自定义的板块加Ext可以实现多种复杂的页面
六、关键字

门户引擎，自定义搜索框，自定义