脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Ext JS4,用grid.plugin.CellEditing做高级查询:
写了90%，界面出来了，小兴奋就贴出来，还有细节要调整，基本能用。
代码：
[javascript]
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();
}
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询全部内容，希望文章能够帮你解决javascript代码实例教程-Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。