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

定义自定义查询列 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'
});
com.awd.advancedSearch.tableGroup.superclass.initComponent.apply(this,arguments);
}
,loadTableField:function(selectedTableColumns){
Ext.Ajax.request({
url : '../AdvancedSearch/getDisplayTables.do',
method:'post',
params:{tableNames:baseTableData.toString()},
success : function(request) {
var tables = Ext.decode(request.responseText);
var myfieldset = null;
if (this.items.length == 0) {
for (var i = 0; i < tables.length; i++) {
myfieldset = new Ext.form.FieldSet({
title : tables[i].tableString
,collapsible : true
,autoHeight : true
,layout : 'column'
,items : [
{xtype : 'remotecheckboxgroup',
columns : 5,
url : '../SearchTableColumns/extListAsFieldDisplay.do',
baseParams : {
dir : 'ASC',
limit : '150',
s_tablename : tables[i].tableName,
selectedTableColumns:selectedTableColumns
},
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'list',
fields : [{name : 'fieldId'},{name : 'fieldName'},{name : 'fieldLabel'},{name : 'fieldValue'},{name : 'fieldChecked'}]
}),
fieldId : 'fieldId',
fieldName : 'fieldName',
fieldLabel : 'fieldLabel',
fieldValue : 'fieldValue',
fieldChecked : 'fieldChecked'
}]
});
this.items.add(myfieldset);
}
}else{
for (var j = 0; j < tables.length; j++) {
this.remove(0);
}
for (var i = 0; i < tables.length; i++) {
myfieldset = new Ext.form.FieldSet({
title : tables[i].tableString
,collapsible : true
,autoHeight : true
,layout : 'column'
,items : [
{xtype : 'remotecheckboxgroup',
columns : 5,
url : '../SearchTableColumns/extListAsFieldDisplay.do',
baseParams : {
dir : 'ASC',
limit : '150',
s_tablename : tables[i].tableName,
selectedTableColumns:selectedTableColumns
},
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'list',
fields : [{name : 'fieldId'},{name : 'fieldName'},{name : 'fieldLabel'},{name : 'fieldValue'},{name : 'fieldChecked'}]
}),
fieldId : 'fieldId',
fieldName : 'fieldName',
fieldLabel : 'fieldLabel',
fieldValue : 'fieldValue',
fieldChecked : 'fieldChecked'
}]
});
this.items.add(myfieldset);
}
}
this.doLayout(true);
}
,scope : this
,failure : function() {
alert('加载错误，请确认网络连接正常！');
}
});
}
});



1 Ext.apply(Ext, {
2 isFirebug: (window.console && window.console.firebug)
3 });
4
5 Ext.ns('app');
6
7 app.getMetaGrid = function(config){
8
9 return new Ext.ux.grid.MetaGrid(Ext.apply({
10 baseParams: null,
11 /**
12
13 * @cfg {String} url Specify the url to the data object (server side
14
15 * script) from which to load data through the HttpProxy.
16
17 */
18
19 url: '../AdvancedSearch/extSearchResultList.do?ssid='+globalQueryString("ssid"),
20 // url: 'meta-data.js',
21
22 renderChange: function(val){
23 if (val > 0) {
24 return '<span style="color:green;">' + val + '</span>';
25 } else if (val < 0) {
26 return '<span style="color:red;">' + val + '</span>';
27 }
28 return val;
29 },
30 renderCombo: function(val, metadata, record, rowIndex, colIndex, store){
31 var data;
32 /*
33
34 // the field name:
35
36 //var field = record.fields.items[colIndex].name; // unreliable since colIndex may be wrong
37
38 var field = this.colModel.getDataIndex(colIndex);
39
40
41
42 // Use the Store Manager to get a reference to the ComboBox store.
43
44 // The store that is passed as one of arguments to this renderer
45
46 // function is the grid store. We need to cross reference the data
47
48 // with the ComboBox store, not the grid store.
49
50 //Get a registered Store using the id of the Store
51
52 var storeId = field;
53
54 var comboStore = Ext.StoreMgr.lookup(storeId);
55
56
57
58 if (!comboStore) {
59
60 comboStore = new App.ComboStore(storeId);
61
62 }
63
64 var comboRecord = comboStore.getById(val);
65
66 if (comboRecord) {
67
68 data = comboRecord.data.displayField;
69
70 }
71
72 else {
73
74 data = data;//'missing data';
75
76 }
77
78 */
79
80 // return the value that should be rendered into the grid cell
81 return data;
82 },
83
84 /**
85
86 * Date renderer function
87
88 * Renders a date
89
90 */
91 renderDate: function(date){
92 return date ? date.dateFormat('M d, Y') : '';
93 },
94 renderDateTime: function(date){
95 if (!date) {
96 return '';
97 }
98
99 var now = new Date();
var d = now.clearTime(true);
var notime = date.clearTime(true).getTime();
if (notime == d.getTime()) {
return 'Today ' + date.dateFormat('g:i a');
}

d = d.add('d', -6);

if (d.getTime() <= notime) {
return date.dateFormat('D g:i a');
}
return date.dateFormat('n/j g:i a');
},

/**

* Italic Custom renderer function

* takes val and renders it in italics

* @param {Object} val

*/

renderItalic: function(data, metadata, record, rowIndex, columnIndex, store){
return '<i>' + data + '</i>';
},

/**

* Percent Custom renderer function

* takes 'data' and renders it red or green with %

*/

renderPctChange: function(data, metadata, record, rowIndex, columnIndex, store){

var p = (parseFloat(data) * 100.0).toFixed(1);
var qtip = '>';
if (data >= 0) {
//meta.css = 'green-cls';
qtip = " qtip='yeah'/>";
return '<span style="color:green;"' + qtip + data + '%</span>';
} else if (data < 0) {
//meta.css = 'red-cls';
qtip = " qtip='woops'/>";
return '<span style="color:red;"' + qtip + data + '%</span>';
}
//css:

//.red-cls {color: red;}

//.green-cls {color: green;}

return data;
},

/**

* Red/Green Custom renderer function

* takes val and renders it red if <0 otherwise renders it green

* @param {Object} val

*/

renderPosNeg: function(data, metadata, record, rowIndex, columnIndex, store){
if (data >= 0) {
return '<span style="color:green;">' + data + '</span>';
} else if (data < 0) {
return '<span style="color:red;">' + data + '</span>';
}
return data;
},

/**

* Risk Custom renderer function

* Renders according to risk level

* @param {Object} val

*/

renderRisk: function(data, metadata, record, rowIndex, columnIndex, store){
switch (data) {
case "high":
metadata.css = "redcell";
return "high";//display 'high' in the cell (could be
//we could display anything here

//"High","Hi","yup"...anything
case "medium":
return "medium";
case "low":
return "low";
default:
return data;
}

},
/**

* Star Custom renderer function

* Renders a picture according to value

* @param {Object} val

*/
renderStars: function(data, metadata, record, rowIndex, columnIndex, store){
switch (data) {
case "1":
metadata.css = "stars1";
return 1;//returns text over the background image
case "2":
metadata.css = "stars2";
return;//just shows the background image
case "3":
metadata.css = "stars3";
return;
case "4":
metadata.css = "stars4";
return;
case "5":
metadata.css = "stars5";
return;
default:
return data;
}
}
,renderQtip: function(data, metadata, record, rowIndex, columnIndex, store){
metadata.attr = 'ext:qtip="' + data + '"';
return data;
}

}, config));
};

Ext.onReady(function(){
var vp = new Ext.Viewport({
layout:'fit',
items: [app.getMetaGrid({
border: false
})]
});
});

所有JS打包下载共享 /Files/yimu/advancedSearch.7z

一切尽在代码中