Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询 --第10强
Ext JS4,用grid.plugin.CellEditing做高级查询:
写了90%,界面出来了,小兴奋就贴出来,还有细节要调整,基本能用。
代码:
Ext.define('chenghao.admin.SearchGrid', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*'
],
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
//可用查询项
var fieldStore = new Ext.data.Store({
fields: ['value', 'text'],
proxy: {
type: 'ajax',
url: CONF.CONN_URL,
extraParams: {
module: 'admin',
action: 'get_search_field_list'
},
reader: {
type: 'json',
root: CONF.JSON_READER_ROOT
}
},
folderSort: true,
autoLoad: false
});
// 比较运算符数据源
var bijiaoStore = new Ext.data.Store({
fields: ['value', 'text'],
proxy: {
type: 'ajax',
url: CONF.CONN_URL,
extraParams: {
module: 'admin',
action: 'get_search_operator_list'
},
reader: {
type: 'json',
root: CONF.JSON_READER_ROOT
}
},
folderSort: true,
autoLoad: false
});
// 逻辑运算符数据源
var luojiStore = new Ext.data.Store({
fields: ['value', 'text'],
proxy: {
type: 'ajax',
url: CONF.CONN_URL,
extraParams: {
module: 'admin',
action: 'get_search_operator_list',
key: 'logic_operator'
},
reader: {
type: 'json',
root: CONF.JSON_READER_ROOT
}
},
folderSort: true,
autoLoad: false
}); var me = this;
Ext.apply(this, {
title: '高级查询',
region: 'north',
//height: 120,
split: true, //自动伸展
collapsible: true, //可折叠 plugins: [me.cellEditing],
store: new Ext.data.Store({
fields: ['LeftParenthesis', 'QueryFieldNametext', 'QueryFieldName', 'QueryComparisonOperationtext', 'QueryComparisonOperation',
'QueryText', 'QueryValue', 'RightParenthesis', 'QueryLogicOperator', 'QueryLogicOperatortext'],
data: {
'search': [{
"LeftParenthesis": "",
"QueryFieldName": "",
"QueryComparisonOperation": "",
"QueryText": "",
"RightParenthesis": "",
"QueryLogicOperator": ""
}]
},
proxy: {
type: 'memory',
url: '',
reader: {
type: 'json',
root: 'search'
}
}
}),
selType: 'cellmodel', //设置为单元格选择模式
columns: [{
header: '删除',
//width: '5%',
sortable: false,
fixed: true,
align: 'center',
xtype: 'actioncolumn',
items: [{
//icon: DeleteIcon,
iconCls: 'icon-action icon-delete-record',
handler: function(grid, rowIndex, colIndex) {
//alert(grid.getStore().getCount());
var rec = grid.getStore().getAt(rowIndex);
if (grid.getStore().getCount() != 1) {
Ext.Msg.confirm('提示', '确定要删除吗?', function(btn) {
if (btn == 'yes') {
grid.getStore().remove(rec);
}
});
} else {
Ext.Msg.alert('错误提示','当前是最后一行,不能删除!');
}
}
}]
}, {
header: '左括号',
//width: '9%',
dataIndex: 'LeftParenthesis',
align: 'center',
field: {
xtype: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [['1', '('], ['0', '无']]
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all', // 无论有没有内容,下拉列表全部显示,有内容会自动在该内容上高亮显示
selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
editable: false,
emptyText: "--请选择--"
}
}, {
header: '查询条件',
dataIndex: 'QueryFieldNametext',
//width: '23%',
align: 'center',
field: {
xtype: 'combobox',
hiddenname: 'value',
store: fieldStore,
valueField: 'text',
displayField: 'text',
triggerAction: 'all', // 无论有没有内容,下拉列表全部显示,有内容会自动在该内容上高亮显示
selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
editable: false,
emptyText: "--请选择--",
// 给查询条件加展开事件
listeners: {
expand: function() {
// 定义等待效果
if (this.value == "") {
fieldStore.load({
callback: function(records, options, success) {
}
});
}
},
change: function(e, value, oldValue) {
var index = fieldStore.find('text', e.getValue()); //me.getStore().getAt(0).data.QueryFieldName = "123";
var row = me.getSelectionModel().getCurrentPosition().row;
if (index != -1) {
fieldStore.each(function(rec) {
if (rec.get('text') == e.getValue()) {
//alert(rec.get('value'));
me.getStore().getAt(row).data.QueryFieldName = rec.get('value');
}
});
}
//alert(this.value);
//alert(Ext.JSON.encode(me.getSelectionModel().getCurrentPosition()));
}
}
}
}, {
header: '查询条件',
dataIndex: 'QueryFieldName',
align: 'center',
hideable: false,
hidden: true
}, {
header: '比较运算符',
dataIndex: 'QueryComparisonOperationtext',
//width: '10%',
align: 'center',
field: {
xtype: 'combobox',
hiddenname: 'value',
store: bijiaoStore,
valueField: 'text',
displayField: 'text',
triggerAction: 'all', // 无论有没有内容,下拉列表全部显示,有内容会自动在该内容上高亮显示
selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
editable: false,
emptyText: '',
listeners: {
change: function(e, value, oldValue) {
var index = bijiaoStore.find('text', e.getValue());
var row = me.getSelectionModel().getCurrentPosition().row;
if (index != -1) {
bijiaoStore.each(function(rec) {
if (rec.get('text') == e.getValue()) {
me.getStore().getAt(row).data.QueryComparisonOperation = rec.get('value');
}
});
}
}
}
}
}, {
header: '比较运算符',
dataIndex: 'QueryComparisonOperation',
align: 'center',
hideable: false,
hidden: true
}, {
header: '请输入查询条件',
dataIndex: 'QueryText',
width: 180,
align: 'center',
field:{
xtype: 'textfield',
listeners: {
click: function(e, h, rowIndex) {
var rec = me.getStore().getAt(rowIndex).data;
var fieldId = rec.QueryFieldNametext; if (fieldId == "") {
Ext.Msg.alert("请选择查询条件");
return;
}
if (rec.QueryComparisonOperation == "is null" || rec.QueryComparisonOperation == "is not null"){
return;
}
}
}
}
}, {
header: '右括号',
//width: '9.6%',
dataIndex: 'RightParenthesis',
align: 'center',
field: {
xtype: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [['1', ')'], ['0', '无']]
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all', // 无论有没有内容,下拉列表全部显示,有内容会自动在该内容上高亮显示
selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
editable: false,
emptyText: "--请选择--"
}
}, {
header: '逻辑运算符',
dataIndex: 'QueryLogicOperatortext',
//width: '10%',
align: 'center',
field: {
xtype: 'combo',
hiddenname: 'value',
store: luojiStore,
valueField: 'text',
displayField: 'text',
triggerAction: 'all', // 无论有没有内容,下拉列表全部显示,有内容会自动在该内容上高亮显示
selectOnFocus: true, // 用户不能自己输入,只能选择列表中有的记录
editable: false,
emptyText: '',
listeners: {
change: function(e, value, oldValue) {
var index = luojiStore.find('text', e.getValue());
var row = me.getSelectionModel().getCurrentPosition().row;
if (index != -1) {
luojiStore.each(function(rec) {
if (rec.get('text') == e.getValue()) {
me.getStore().getAt(row).data.QueryLogicOperator = rec.get('value');
}
});
}
}
}
}
}, {
header: '逻辑运算符',
dataIndex: 'QueryLogicOperator',
align: 'center',
hideable: false,
hidden: true
}, {
header: '操作',
//width: '5%',
fixed: true,
align: 'center',
xtype: 'actioncolumn',
items: [{
//icon: AddIcon,
iconCls: 'add',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex).data;
if (rec.QueryFieldName == "") {
Ext.Msg.alert('错误提示','请输入查询条件!');
return;
} else if (rec.QueryComparisonOperation == "") {
Ext.Msg.alert('错误提示','请输入比较运算符!');
return;
} else if (rec.QueryLogicOperator == "") {
Ext.Msg.alert('错误提示','请输入逻辑运算符!');
return;
}
// 插入一行查询条件
me.getStore().insert(rowIndex + 1, '');
}
}] }],
dockedItems: [{
xtype: 'toolbar',
items: [{
//icon: SearchIcon,
text: '查询',
handler: function() {
var SearchStore = me.getStore();
var count = SearchStore.getCount(); if (count == 1 && SearchStore.getAt(0).data.QueryFieldName == "") {
//alert(SearchStore.getAt(0).data.QueryFieldName); var LeftParenthesis = SearchStore.getAt(0).data.LeftParenthesis;
var RightParenthesis = SearchStore.getAt(0).data.RightParenthesis;
if (LeftParenthesis == "" && RightParenthesis != "") {
Ext.Msg.alert('错误提示', '括号不匹配,请修改查询条件!');
return;
}
if (LeftParenthesis != "" && RightParenthesis == "") {
Ext.Msg.alert('错误提示', '括号不匹配,请修改查询条件!');
return;
}
me.getStore();
return;
} for(var i = 0; i< count; i++){
var a = new Array();
alert(Ext.JSON.encode(me.getStore().getAt(i).data));
//alert(me.getStore().getAt(i).data.LeftParenthesis);
//record = grid.getStore().getAt(i);
//var colname = grid.getColumnModel().getDataIndex(i); //获取列名
//var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据
//Ext.MessageBox.alert("test",colname);
//for (var j = 0; j < colIndex; colIndex++) {
//Ext.MessageBox.alert("test",grid.getColumnModel().getDataIndex(j));
//}
} //var msg = dynamicPublicSearch(SearchStore);
//if (msg == "") {
//me.getStore();
//}
}
}]
}]
}); this.callParent();
}
});
Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询 --第10强的更多相关文章
- Ext JS4百强应用: 做可编辑的,可checked的treegrid--第11强
做一个可编辑的,可checked的treegrid,代码相当简洁: 请看代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...
- EXT的bug 布局border 和 grid的cellediting
首先 我要的布局是上下两块,并且高度和按自己的喜欢可调节,所以我采用的是border的布局, 上下两块,都放grid列表,上面一块不可编辑,下面这块可编辑,如图 在编辑第二块的时候会出现这个现象 图一 ...
- Ext JS4百强应用:设置textfield的悬浮提示信息 --第8强
在Extjs4中有时候我们需要textfield的提示信息,但是我们发现textfield并没有这样的配置项. 这时候我们就要另想方法:我们需要在鼠标悬停在textfield组件的时候进行信息的提示, ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- Ext.grid.plugin.RowExpander的简单用法
有时候,我们在grid里渲染数据时,由于某些字段的内容太长,而grid又不会自动出现滚动条,于是溢出的内容后面就会出现省略号, 导致信息展示不完全.如果,这个信息不太重要,展示不完全也无关紧要.可是, ...
- 2013年度IT博客大赛跻身10强
2013年12月26日,由51CTO独家举办的2013年度IT博客大赛圆满落幕,荣幸跻身10强[http://fellow.51cto.com/art/201312/425528.htm],首先感谢各 ...
- 摹客项目在2018年工信部"创客中国"名列10强并荣获二等奖
2018“创客中国”互联网+大数据创新创业大赛(暨2018创客中国产业投资峰会)8月19日在厦门进行了总决赛.大赛由国家工业和信息化部.厦门市人民政府主办,厦门文广集团等承办.工信部信息中心领导.厦门 ...
- Ext Js 6.2.1 classic grid 滚动条bug解决方案
此bug未在其他版本发现,参考高版本代码重写类解决此bug,直接上代码: /** * 如果列表同时存在横向滚动条和竖向滚动条,当竖向滚动条滚动到底部时 * 点击横向滚动条,滚动条会自动滚动到顶部 * ...
- 名词解释——Ext JS4
Ext.onReady——Ext主入口,和onload事件不同,不需要页面所有东西加在出来. Ext js 的基本语法就是使用树状图来配置对象来定义界面: { config_options1:valu ...
随机推荐
- 什么是EF, 和 Entity Framework Demo简单构建一个良好的发展环境
Entity Framwork(实体框架.缩写EF)这是ORM(Object Relational Mapping.对象映射关系)一个解决方案. EF的表映射为实体.并封装了操作方法.方便开发者 ...
- IS2009制作Oracle 静默安装包(二) 感谢空白先生特许授权
原文:IS2009制作Oracle 静默安装包(二) 感谢空白先生特许授权 上一篇: IS2009制作Oracle 静默安装包(一)感谢空白先生特许授权本文经原作者特许授权于海洋女神发布,转载请务必注 ...
- ReSharper C++计划上市
ReSharper是著名的VS代码生成工具,去年夏天,JetBrains公司就发布了ReSharper将推出支持C++的版本. ReSharper C++ EAP(Early Access Progr ...
- Gimp插件Hello world注释
前一阵翻译gimp官网的编写插件教程,本打算继续翻译第二部分,但是感觉第一个例子还不是很懂,翻译第二部分有点理解不能,所以就读了一下源码,记录如下 #include <libgimp/gimp. ...
- 安装Windows2012操作系统 - 初学者系列 - 学习者系列文章
Windows 2012是微软最新的服务器操作系统,估计在国外服务器空间的运营商安装的比较多些吧.下面简要介绍下该操作系统的安装. 1. 将光盘放入光驱.进入BIOS设置成光驱启动.重启计算机. 2 ...
- 经历:asp.net oracle 部署问题以及解决方法
原文:[原创]经历:asp.net oracle 部署问题以及解决方法 精简的美丽...... 一.环境 开发环境 win7 64bit Vs2010 ...
- HPQC HP Quality Center windows 服务
HPQC HP Quality Center windows 服务已经启动的话,就不用运行run.bat 两个是一样的效果.
- Function.prototype.toString
语法:fn.toString(indentation) 改方法返回当前函数源代码的字符串,而且还可对此字符串进行操作,比如: function num(){ }; var str = num.toSt ...
- HTML框架集之Frameset与Iframe简单应用
首先我们要明白此框架集的作用: 实现在一个页面中访问多个html页面的目的Frameset的用法: //定义框架集<frameset><frame src="demo.ht ...
- [置顶] Hibernate从入门到精通(十)多对多单向关联映射
上一篇文章Hibernate从入门到精通(九)一对多双向关联映射中我们讲解了一下关于一对多关联映射的相关内容,这次我们继续多对多单向关联映射. 多对多单向关联映射 在讲解多对多单向关联映射之前,首先看 ...