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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了extjs实现选择多表自定义查询功能 前台部分(ext源码)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10984字，纯文字阅读大概需要16分钟。

内容图文

主要使用的技术：
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主要代码如下：
代码如下:

{header:'括号',dataIndex:'leftbrackets',width:40,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: leftBracketsComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true 
// lazyInit:false, 
// listeners: { 
// 'focus' : 
// function(){ 
// this.expand(); 
// } 
// } 
})), 
renderer: function(value, cellmeta, record){ 
if(value == null || value == ""){ 
return ""; 
} 
return leftBracketsComboData[value][1]; 
},scope:this} 
,{header:'表名称',dataIndex:'tablename',width:80,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: baseTableData 
}), 
id:'baseTableNameID', 
tpl: '<tpl for="."><div ext:qtip="{text}" class="x-combo-list-item">{text}</div></tpl>', 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
lazyInit:false, 
listeners: { 
'expand':function(combo){ 
combo.clearValue(); 
combo.store.loadData(baseTableData); 
} 
,'select':function(){ 

} 
,'focus' :function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return; 
} 
return record.get("tablenamestring"); 
}} 
,{header:'查询条件列',dataIndex:'fieldname',width:90,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
id:'fieldnameID' 
,store : new Ext.data.Store({ 
proxy : new Ext.data.HttpProxy({url : '../SearchTableColumns/extlistKV.do'}) 
,reader : new Ext.data.JsonReader({}, ['name','chinese']) 
,baseParams:{s_tablename:'0'} 
}) 
,tpl: '<tpl for="."><div ext:qtip="{chinese}" class="x-combo-list-item">{chinese}</div></tpl>' 
,valueField :'name' 
,displayField :'chinese' 
,mode : 'remote' 
,forceSelection : true 
,triggerAction : 'all' 
,typeAhead : false 
,selectOnFocus : true 
,resizable:true 
,width : 120 
,lazyInit:false 
,listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
} 
)), 
renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return ""; 
} 
return record.get("fieldnamestring"); 
}} 
,{header:'逻辑运算符',dataIndex:'relationsign',width:70,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: relationSignComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true, 
lazyInit:false, 
listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return; 
} 
return relationSignComboData[value][1]; 
},scope:this} 
,{header:'查询条件值',dataIndex:'expressvalue',width:125,editor:new Ext.grid.GridEditor(new Ext.form.TextField({ })) 
, renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return ""; 
} 
return record.get("expressvaluestring"); 
} 
} 
,{header:'括号',dataIndex:'rightbrackets',width:40,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: rightBracketsComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true, 
lazyInit:false, 
listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record){ 
if(value == null || value == ""){ 
return ""; 
} 
return rightBracketsComboData[value][1]; 
},scope:this} 
,{header:'关系运算符',dataIndex:'operatorsign',width:70,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: operatorSignComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true, 
lazyInit:false, 
listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record){ 
if(value == null || value == ""){ 
return ; 
} 
return operatorSignComboData[value][1]; 
},scope:this} 
,this.rowActions 

]); 


 代码如下:

Ext.namespace('com.awd'); 
Ext.namespace('com.awd.advancedSearch'); 
com.awd.advancedSearch.tableGroup = Ext.extend(Ext.form.FormPanel, { 
initComponent : function() { 
Ext.apply(this, { 
border : true, 
buttonAlign:'right', 
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('加载错误，请确认网络连接正常！'); 
} 
}); 
} 
}); 



 代码如下:

Ext.apply(Ext, { 
isFirebug: (window.console && window.console.firebug) 
}); 
Ext.ns('app'); 
app.getMetaGrid = function(config){ 
return new Ext.ux.grid.MetaGrid(Ext.apply({ 
baseParams: null, 
/** 
* @cfg {String} url Specify the url to the data object (server side 
* script) from which to load data through the HttpProxy. 
*/ 
url: '../AdvancedSearch/extSearchResultList.do?ssid='+globalQueryString("ssid"), 
// url: 'meta-data.js', 
renderChange: function(val){ 
if (val > 0) { 
return '<span style="color:green;">' + val + '</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '</span>'; 
} 
return val; 
}, 
renderCombo: function(val, metadata, record, rowIndex, colIndex, store){ 
var data; 
/* 
// the field name: 
//var field = record.fields.items[colIndex].name; // unreliable since colIndex may be wrong 
var field = this.colModel.getDataIndex(colIndex); 
// Use the Store Manager to get a reference to the ComboBox store. 
// The store that is passed as one of arguments to this renderer 
// function is the grid store. We need to cross reference the data 
// with the ComboBox store, not the grid store. 
//Get a registered Store using the id of the Store 
var storeId = field; 
var comboStore = Ext.StoreMgr.lookup(storeId); 
if (!comboStore) { 
comboStore = new App.ComboStore(storeId); 
} 
var comboRecord = comboStore.getById(val); 
if (comboRecord) { 
data = comboRecord.data.displayField; 
} 
else { 
data = data;//'missing data'; 
} 
*/ 
// return the value that should be rendered into the grid cell 
return data; 
}, 
/** 
* Date renderer function 
* Renders a date 
*/ 
renderDate: function(date){ 
return date ? date.dateFormat('M d, Y') : ''; 
}, 
renderDateTime: function(date){ 
if (!date) { 
return ''; 
} 
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打包下载共享 advancedSearch.rar

内容总结

以上是互联网集市为您收集整理的extjs实现选择多表自定义查询功能 前台部分(ext源码)全部内容，希望文章能够帮你解决extjs实现选择多表自定义查询功能 前台部分(ext源码)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---