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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JS实现的几个常用算法
Nov 12 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
ECMAScript6--解构
Mar 30 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
使用vue制作滑动标签
Sep 21 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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
咖啡与牛奶
2021/03/03 冲泡冲煮
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
初识Node.js
2014/09/03 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
详解Python中dict与set的使用
2015/08/10 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python continue继续循环用法总结
2018/06/10 Python
python 美化输出信息的实例
2018/10/15 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
幼师自荐信范文
2013/10/06 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2014年财政工作总结
2014/12/10 职场文书
优秀英文求职信范文
2015/03/19 职场文书
整改通知书格式
2015/04/22 职场文书
化妆品促销活动总结
2015/05/07 职场文书