extjs实现选择多表自定义查询功能————前台部分(ext源码)

主要使用的技术：

1、extjs2.0，整体框架

2、RemoteCheckboxGroup.js ，用于动态生成表字段（供查询结果使用）

3、Ext.ux.grid.RowActions.js，用于grid行扩展（上移下移删除等）

4、Datetime.js，用于时间选择

5、MetaGrid.js 用于动态生成查询结果列表（返回结果Grid）

6、ehcache 用于缓存自定表数据，比如表名称、字段描述、长度等固定信息

7、jxl.jar 用于查询结果输出，最后生成Excel文件

8、Java

 

EditGridPanel主要代码如下：

  1      {header:'括号',dataIndex:'leftbrackets',width:40,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
  2                     store: new Ext.data.SimpleStore({
  3                         fields:['value','text'],
  4                         data: leftBracketsComboData
  5                     }),
  6                     mode: 'local',
  7                     triggerAction: 'all',
  8                     editable:false,
  9                     valueField: 'value',
 10                     displayField: 'text',
 11                     readOnly:true
 12 //                    lazyInit:false,
 13 //                    listeners: {
 14 //                        'focus' : 
 15 //                              function(){  
 16 //                                this.expand();  
 17 //                               }  
 18 //                      }
 19                 })),
 20                 renderer: function(value, cellmeta, record){
 21                     if(value == null || value == ""){
 22                         return "";
 23                     }
 24                     return leftBracketsComboData[value][1];
 25                 },scope:this}
 26             ,{header:'表名称',dataIndex:'tablename',width:80,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
 27                     store: new Ext.data.SimpleStore({
 28                         fields:['value','text'],
 29                         data: baseTableData
 30                     }),
 31                     id:'baseTableNameID',
 32                     tpl: '<tpl for="."><div ext:qtip="{text}" class="x-combo-list-item">{text}</div></tpl>',
 33                     mode: 'local',
 34                     triggerAction: 'all',
 35                       editable:false,
 36                     valueField: 'value',
 37                     displayField: 'text',
 38                     lazyInit:false,
 39                     listeners: {
 40                          'expand':function(combo){
 41                                   combo.clearValue();
 42                                   combo.store.loadData(baseTableData);
 43                           }
 44                           ,'select':function(){
 45                                   
 46                           }
 47                          ,'focus' :function(){  
 48                                 this.expand();  
 49                            }  
 50                       }
 51                 })),
 52                 renderer: function(value, cellmeta, record, row, col, store){
 53                        if(value == null || value == ""){
 54                         return;
 55                     } 
 56                     return record.get("tablenamestring");
 57                 }}
 58             ,{header:'查询条件列',dataIndex:'fieldname',width:90,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
 59                     id:'fieldnameID'
 60                       ,store : new Ext.data.Store({
 61                                 proxy : new Ext.data.HttpProxy({url : '../SearchTableColumns/extlistKV.do'})
 62                                 ,reader : new Ext.data.JsonReader({}, ['name','chinese'])
 63                                 ,baseParams:{s_tablename:'0'}
 64                                 })   
 65                             ,tpl: '<tpl for="."><div ext:qtip="{chinese}" class="x-combo-list-item">{chinese}</div></tpl>'
 66                             ,valueField :'name'
 67                             ,displayField :'chinese'
 68                             ,mode : 'remote'
 69                             ,forceSelection : true
 70                             ,triggerAction : 'all'
 71                             ,typeAhead : false
 72                             ,selectOnFocus : true
 73                             ,resizable:true
 74                             ,width : 120
 75                             ,lazyInit:false
 76                             ,listeners: {
 77                                   'focus' : 
 78                                       function(){  
 79                                         this.expand();  
 80                                        }
 81                               }
 82                     }
 83                 )),
 84                 renderer: function(value, cellmeta, record, row, col, store){
 85                     if(value == null || value == ""){
 86                         return "";
 87                     }
 88                     return record.get("fieldnamestring");
 89                 }}
 90             ,{header:'逻辑运算符',dataIndex:'relationsign',width:70,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
 91                     store: new Ext.data.SimpleStore({
 92                         fields:['value','text'],
 93                         data: relationSignComboData
 94                     }),
 95                     mode: 'local',
 96                     triggerAction: 'all',
 97                     editable:false,
 98                     valueField: 'value',
 99                     displayField: 'text',
100                     readOnly:true,
101                     lazyInit:false,
102                     listeners: {
103                          'focus' : 
104                               function(){  
105                                 this.expand();  
106                                }  
107                       }
108                 })),
109                 renderer: function(value, cellmeta, record, row, col, store){
110                     if(value == null || value == ""){
111                         return;
112                     }
113                     return relationSignComboData[value][1];
114                 },scope:this}
115             ,{header:'查询条件值',dataIndex:'expressvalue',width:125,editor:new Ext.grid.GridEditor(new Ext.form.TextField({       }))
116                , renderer: function(value, cellmeta, record, row, col, store){
117                     if(value == null || value == ""){
118                         return "";
119                     }
120                     return record.get("expressvaluestring");
121                 }
122                 }
123                 ,{header:'括号',dataIndex:'rightbrackets',width:40,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
124                     store: new Ext.data.SimpleStore({
125                         fields:['value','text'],
126                         data: rightBracketsComboData
127                     }),
128                     mode: 'local',
129                     triggerAction: 'all',
130                     editable:false,
131                     valueField: 'value',
132                     displayField: 'text',
133                     readOnly:true,
134                     lazyInit:false,
135                     listeners: {
136                          'focus' : 
137                               function(){  
138                                 this.expand();  
139                                }  
140                       }
141                 })),
142                 renderer: function(value, cellmeta, record){
143                     if(value == null || value == ""){
144                         return "";
145                     }
146                     return rightBracketsComboData[value][1];
147                 },scope:this}
148                ,{header:'关系运算符',dataIndex:'operatorsign',width:70,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
149                     store: new Ext.data.SimpleStore({
150                         fields:['value','text'],
151                         data: operatorSignComboData
152                     }),
153                     mode: 'local',
154                     triggerAction: 'all',
155                     editable:false,
156                     valueField: 'value',
157                     displayField: 'text',
158                     readOnly:true,
159                     lazyInit:false,
160                     listeners: {
161                          'focus' : 
162                               function(){  
163                                 this.expand();  
164                                }  
165                       }
166                 })),
167                 renderer: function(value, cellmeta, record){
168                     if(value == null || value == ""){
169                         return ;
170                     }
171                     return operatorSignComboData[value][1];
172                 },scope:this}
173                 ,this.rowActions
174                
175         ]);

 

 

 

 

 

 1 Ext.namespace('com.awd');
 2 Ext.namespace('com.awd.advancedSearch');
 3 
 4 com.awd.advancedSearch.tableGroup = Ext.extend(Ext.form.FormPanel, {
 5     initComponent : function() {
 6         Ext.apply(this, {
 7             border : true,
 8             buttonAlign:'right',
 9             bodyStyle : 'padding:5px;overflow-y:scroll;border-left:1px solid #8DB2E3'
10         });
11         com.awd.advancedSearch.tableGroup.superclass.initComponent.apply(this,arguments);
12     }
13     ,loadTableField:function(selectedTableColumns){
14            Ext.Ajax.request({
15                     url : '../AdvancedSearch/getDisplayTables.do',
16                     method:'post',
17                     params:{tableNames:baseTableData.toString()},
18                     success : function(request) {
19                         var tables = Ext.decode(request.responseText);
20                         var myfieldset = null;
21                         if (this.items.length == 0) {
22                             for (var i = 0; i < tables.length; i++) {
23                                 myfieldset = new Ext.form.FieldSet({
24                                     title : tables[i].tableString
25                                     ,collapsible : true
26                                     ,autoHeight : true
27                                     ,layout : 'column'
28                                     ,items : [
29                                        {xtype : 'remotecheckboxgroup',
30                                         columns : 5,
31                                         url : '../SearchTableColumns/extListAsFieldDisplay.do',
32                                         baseParams : {
33                                             dir : 'ASC',
34                                             limit : '150',
35                                             s_tablename : tables[i].tableName,
36                                             selectedTableColumns:selectedTableColumns
37                                         },
38                                         reader : new Ext.data.JsonReader({
39                                                     totalProperty : 'totalProperty',
40                                                     root : 'list',
41                                                     fields : [{name : 'fieldId'},{name : 'fieldName'},{name : 'fieldLabel'},{name : 'fieldValue'},{name : 'fieldChecked'}]
42                                                 }),
43                                         fieldId : 'fieldId',
44                                         fieldName : 'fieldName',
45                                         fieldLabel : 'fieldLabel',
46                                         fieldValue : 'fieldValue',
47                                         fieldChecked : 'fieldChecked'
48                                     }]
49                                 });
50                                 this.items.add(myfieldset);
51                             }
52                         }else{
53                             for (var j = 0; j < tables.length; j++) {
54                                 this.remove(0);  
55                             }
56                             for (var i = 0; i < tables.length; i++) {
57                                 myfieldset = new Ext.form.FieldSet({
58                                     title : tables[i].tableString
59                                     ,collapsible : true
60                                     ,autoHeight : true
61                                     ,layout : 'column'
62                                     ,items : [
63                                        {xtype : 'remotecheckboxgroup',
64                                         columns : 5,
65                                         url : '../SearchTableColumns/extListAsFieldDisplay.do',
66                                         baseParams : {
67                                             dir : 'ASC',
68                                             limit : '150',
69                                             s_tablename : tables[i].tableName,
70                                             selectedTableColumns:selectedTableColumns
71                                         },
72                                         reader : new Ext.data.JsonReader({
73                                                     totalProperty : 'totalProperty',
74                                                     root : 'list',
75                                                     fields : [{name : 'fieldId'},{name : 'fieldName'},{name : 'fieldLabel'},{name : 'fieldValue'},{name : 'fieldChecked'}]
76                                                 }),
77                                         fieldId : 'fieldId',
78                                         fieldName : 'fieldName',
79                                         fieldLabel : 'fieldLabel',
80                                         fieldValue : 'fieldValue',
81                                         fieldChecked : 'fieldChecked'
82                                     }]
83                                 });
84                                 this.items.add(myfieldset);  
85                             }
86                         }
87                         this.doLayout(true);
88                     }
89                     ,scope : this
90                     ,failure : function() {
91                         alert('加载错误，请确认网络连接正常！');
92                     }
93                 });    
94         }
95 });
96