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


Posted in Javascript onDecember 20, 2011

主要使用的技术:
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
extjs实现选择多表自定义查询功能 前台部分(ext源码)

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 
]);

extjs实现选择多表自定义查询功能 前台部分(ext源码)
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('加载错误,请确认网络连接正常!'); 
} 
}); 
} 
});

extjs实现选择多表自定义查询功能 前台部分(ext源码)
extjs实现选择多表自定义查询功能 前台部分(ext源码)
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

Javascript 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
JS查看对象功能代码
Apr 25 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 #Javascript
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
jQuery版仿Path菜单效果
Dec 15 #Javascript
You might like
ThinkPHP之getField详解
2014/06/20 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
详解Vue.js分发之作用域槽
2017/06/13 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python实现俄罗斯方块
2018/06/26 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
用python实现一个简单的验证码
2020/12/09 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
学习心得体会
2014/01/01 职场文书
农贸市场管理制度
2014/01/31 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
温馨提示标语
2014/06/26 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2015年派出所工作总结
2015/04/24 职场文书
基层工作经历证明
2015/06/19 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫