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 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
JavaScript随机数的组合问题案例分析
May 16 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Django中的ajax请求
2018/10/19 Python
Python argparse模块使用方法解析
2020/02/20 Python
日语专业推荐信
2013/11/12 职场文书
小学教师管理制度
2014/01/18 职场文书
主题实践活动总结
2014/05/08 职场文书
2014年防汛工作总结
2014/12/08 职场文书
未婚证明范本
2015/06/15 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python