门户引擎自定义脚本面板，挂载到功能中，联动过滤数据

凯特-呼丽华

门户引擎自定义中写了自定义表格，将此门户挂到功能的扩展面板中，通过勾选当前面板的数据过滤功能列表数据，并刷新列表

一、案例效果

筛选前效果：

筛选后效果：


二、 实现思路

1. 在自定义门户引擎中定义gird面板

2. 在事件中写监听事件，选中面板中的某个数据，然后将数据拼接成j_query条件，用来过滤功能列表数据并且刷新列表

3. 在功能中引用扩展面板


三、操作步骤1. 在自定义门户引擎中定义gird面板


2. 在事件中写监听事件，选中面板中的某个数据，然后将数据拼接成j_query条件，用来过滤功能列表数据并且刷新列表


3. 在功能中引用扩展面板


四、相关代码

1. /*
   
2. 自定义组件
   
3. 返回Ext组件或者组件配置项,如:Ext.create("Ext.form.Panel",{})或者{xtype:"form"}
   
4. */
   
5. function(){
   
6.    //列表数据集
   
7. var store = Ext.create('Ext.data.Store', {
   
8.     fields:['name', 'email', 'phone'],
   
9.     data:{'items':[
   
10.         { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
    
11.         { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
    
12.         { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
    
13.         { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    
14.     ]},
    
15.     proxy: {
    
16.         type: 'memory',//内存代理，读取本地数据，也可以配置ajax代理，可以查看
    
17.         reader: {
    
18.             type: 'json',
    
19.             root: 'items'//列表展示的数据项配置
    
20.         }
    
21.     }
    
22. });
    
23. //创建列表
    
24. var grid = Ext.create('Ext.grid.Panel', {
    
25.     store: store,
    
26.     width: 400,
    
27.     selModel: { selType: 'checkboxmodel' },   //选择框
    
28.     columns: [
    
29.         { text: 'Name',  dataIndex: 'name' },
    
30.         { text: 'Email', dataIndex: 'email'},
    
31.         { text: 'Phone', dataIndex: 'phone' }
    
32.     ],
    
33.     listeners: {
    
34.         'itemclick': function (view, record, item, index, e) {
    
35.             //debugger;
    
36.             //Ext.MessageBox.alert("标题",record.data.name);
    
37.             var  j_query = {"custom": [{"cn": "and","code": "ZHAUNYUN_ABR","type": "=","value": "李四"}]}
    
38.             var grid = view.up('jedataview').down('jegridview')
    
39.             grid.store.proxy.extraParams.j_query = Ext.encode(j_query);
    
40.             grid.reload();
    
41.         }
    
42.     }
    
43. });
    
44. return grid;
    
45. }

复制代码