Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='s.gif';
Ext.form.Field.prototype.msgTarget = 'side';
Ext.get("addware").addListener("click",addware);
function addware(){
var form=createForm('msd');
var grdDPQuery=createGrid('msd');
var forma=createForma('msd');
var grida=createGrida('msd');
var win1 = new Ext.Window({
title: '高级查询',
modal:true,
closable:true,
width: 500,
height:500,
plain: true,
buttons:[
{text:"查询",
handler: function(){
sumbit();//掉用提交数据的方法
}
},{
text: "取消",
handler: function(){
win1.close();//关闭弹出框
}
}],
items:[form,grdDPQuery,forma,grida]
});
win1.show();
function createGrid(msd){
sm1=new Ext.grid.RowSelectionModel();
var dsPQ=new Ext.data.JsonStore({
data:[" "," "," "],
fields:["idx","relation","leftParenthesis","fieldname"]
});
//运算符
function fileListChange(field,newValue,oldValue){
//alert(field);
}
/*var fieldsDef =new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['VARCHAR','政府'],['INT','部门'],['DATE','集团']]
});*/
var fieldsDef = new Ext.data.JsonStore({
fields: ['value','text','type','data'],
data:[
{value:'政府',text:'政府',type:'VARCHAR'},
{value:'部门',text:'部门',type:'INT'},
{value:'集团',text:'集团',type:'DATE'}
]
});
var lists=new Array();
lists[0]=new Array();
lists[0]=['政府','部门','集团'];
lists[1]=new Array();
lists[1]=['zhengfu','bumen','jituan'];
lists[2]=new Array();
lists[2]=['VARCHAR','INT','DATE'];
//定义一个数组来存储查询条件的值(如果是varchar就把cities[1]付给查询条件)
var cities = new Array();
cities[1] = [['=','等于'],['!=','不等于'],["like '%|%'",'包含'],["not like '%|%'",'不包含']];
cities[2] = [['=','='],['>','>'],['<','<'],['>=','>='],['<=','<='],['!=','!=']];
var date='VARCHAR';
function onchange(ab){
var type="";
for(var i=0;i<lists.length;i++){
for(var j=0;j<lists[i].length;j++){
if(lists[i][j]==ab){
type=lists[2][j];
}
}
}
if(type=="VARCHAR"){
comboCities.store.loadData(cities[1]);
date='VARCHAR';
}
else if(type=="INT"){
comboCities.store.loadData(cities[2]);
date='INT';
}
else if(type=="DATE"){
comboCities.store.loadData(cities[2]);
date='DATE';
}
}
var objGridLookupEditor;
var qRowData = Ext.data.Record.create([
{name:'idx',type:'int'},
{name:'relation',type:'string'},
{name:'leftParenthesis',type:'string'},
{name:'fieldname',type:'string'}
]);
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header:"No.",width:25}),
{
header:"关键字",
dataIndex:"relation",
width:200,
editor:new Ext.form.ComboBox({
store: fieldsDef,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false,
listeners:{
change:function(){
onchange(this.value);
}
}
})
},{
header:"查询条件",
dataIndex:"leftParenthesis",
width:100,
editor:comboCities=new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['cityId','cityName'],
data:[]
}),
valueField :"cityId",
displayField: "cityName",
mode: 'local',
triggerAction: 'all',
editable: false
})
},{
header:"关键字",
dataIndex:"fieldname",
name:"file",
id:"file",
width:144,
renderer:Ext.util.Format.dateRenderer('Y-m-d'),
sortable:true
}
]);
var grdDPQuery = new Ext.grid.EditorGridPanel({
width: 480,
height:130,
region:'south',
renderTo:"hello",
stripeRows:true,//斑马线效果
loadMask:true,
cm:colM,
sm:sm1,
store:dsPQ,
border: false,
enableColumnMove: false,
enableHdMenu: false,
loadMask: {msg:'加载数据...'},
clicksToEdit:1,
bbar:[
{text:'添加',handler:function(){
var count = dsPQ.getCount();
var r = new qRowData({idx:dsPQ.getCount(),relation:'',leftParenthesis:'',fieldname:''});
dsPQ.commitChanges();
dsPQ.insert(count,r);
}
},
{text:'删除',handler:function(){
var reod =sm1.getSelected();
if(reod==null){
alert("请选择一行");
return;
}
if(dsPQ.getCount()==1){
stoll=dsPQ.getRange(0,dsPQ.getCount());
stoll[0].set('idx',"");
stoll[0].set('relation',"");
stoll[0].set('leftParenthesis',"");
stoll[0].set('fieldname',"");
return;
}
dsPQ.remove(reod);
sm1.clearSelections();
dsPQ.getView().refresh();
}
},
{text:'全部清除',handler:function(){dsPQ.removeAll();}}
],
listeners:{ //加载到网格中\
cellclick:function(grid,rowIndex,columnIndex,e){
// alert("sdfsdf"+date);
//当是日期型的时候就调用时期组件
if (columnIndex==3&&date=='DATE'){//绑定运算符
var grdEditor = grid.colModel.getCellEditor(columnIndex,rowIndex);
if (grdEditor)
grdEditor.destroy();
grdEditor =new Ext.form.DateField({format:'Y年m月d日'})
grid.colModel.setEditor(columnIndex, new Ext.grid.GridEditor(grdEditor));
}//当调用数字型的时候就调用文本输入框组件
else if(columnIndex==3&&date=='INT'){//绑定编辑器
var record = grid.getStore().getAt(rowIndex); // Get the Record
var operator = record.get('operator');
if (operator=='is null'||operator=='is not null'){
grid.colModel.setEditor(columnIndex, null);
return;
}
var grdEditor = grid.colModel.getCellEditor(columnIndex,rowIndex);
if (grdEditor)
grdEditor.destroy();
grdEditor =new Ext.form.TextField()
grid.colModel.setEditor(columnIndex, new Ext.grid.GridEditor(grdEditor));
}//当调用数字型的时候就调用下拉分页列表组件
else if(columnIndex==3&&date=='VARCHAR'){
var record = grid.getStore().getAt(rowIndex); // Get the Record
var operator = record.get('operator');
if (operator=='is null'||operator=='is not null'){
grid.colModel.setEditor(columnIndex, null);
return;
}
var grdEditor = grid.colModel.getCellEditor(columnIndex,rowIndex);
if (grdEditor)
grdEditor.destroy();
grdEditor =new Ext.form.TextField()
grid.colModel.setEditor(columnIndex, new Ext.grid.GridEditor(grdEditor));
}
}
}
});
//把grid中的值传入到textarea中
grdDPQuery.addListener('afteredit',rowdblclick); //被编辑后的记录
function rowdblclick(e){
var record =e.record;
var allmost="";
var arrlylist="";
var attle=0;
var sto1=dsPQ.getRange(0,dsPQ.getCount());
for(var i=0;i<dsPQ.getCount();i++){
allmost+=++attle+" "+sto1[i].get("relation")+" "+sto1[i].get("leftParenthesis")+" "+sto1[i].get("fieldname")+'\n';
arrlylist+=sto1[i].get("relation")+"ж"+sto1[i].get("leftParenthesis")+"ж"+sto1[i].get("fieldname")+'*'
}
Ext.get("gril1").dom.value=arrlylist;
// document.getElementById("sdsss").value=allmost;
}
return grdDPQuery;
}
//定义一个form表单
function createForm(msd){
var form = new Ext.form.FormPanel({
labelAlign: 'top',
frame:true,
region:'center',
bodyStyle:'padding:5px 5px 0',
width: 480,
height:80,
layout : "column",
items: [{
layout:'column',
items:[{
xtype:'label',
fieldLabel:'a',
html:'<font color=#808080 style="font-size:12px">设置查询条件<br> 字段:<br> ·在下面的行中设定字段的限定条件<br> ·查询条件会在下面的文本区域中组合<br> ·你可以改变条件的组合方式(如1or(2 and 3))</font>'
}]
}]
});
return form;
}
function createForma(msd){
var forma = new Ext.form.FormPanel({
labelAlign: 'top',
frame:true,
region:'center',
bodyStyle:'padding:5px 5px 0',
width: 500,
height:110,
layout : "column",
items: [{
xtype:'textarea',
fieldLabel: '',
name: 'sdsss',
style:"overflow-y:scroll",
value: '',
height: '15mm',
width:'120mm',
anchor:'95%'
},{
layout:'column',
items:[{
xtype:'label',
fieldLabel:'ass',
html:' '
}]
},{
layout:'column',
items:[{
xtype:'label',
fieldLabel:'a',
html:'<font color=#808080 style="font-size:12px">设置查询条件<br> ·在下面的行中自定义设定查询条件</font>'
}]
}]
});
return forma;
}
function createGrida(msd){
var dsPQ=new Ext.data.JsonStore({
data:[],
fields:["idx","relation","leftParenthesis","fieldname1"]
});
var objGridLookupEditor;
var qRowData = Ext.data.Record.create([
{name:'idx',type:'int'},
{name:'relation',type:'string'},
{name:'leftParenthesis',type:'string'},
{name:'fieldname1',type:'string'}
]);
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header:"No.",width:25}),
{header:"关键字",
css:"background:#fcfbc3;",
width:200,
dataIndex:"relation",
sortable:true,
editor:new Ext.form.TextField2()
},{
header:"查询条件",
dataIndex:"leftParenthesis",
width:100,
editor:new Ext.form.ComboBox({
store: ['==','>','<','>=','<=','!='],
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false
})
},{
header:"关键字",
css:"background:#fcfbc3;",
dataIndex:"fieldname1",
width:144,
editor:new Ext.form.TextField2()
}
]);
sm=new Ext.grid.RowSelectionModel();
var grida = new Ext.grid.EditorGridPanel({
width: 480,
height:100,
region:'south',
renderTo:"hello",
sm:sm,
cm:colM,
store:dsPQ,
border: false,
enableColumnMove: false,
enableHdMenu: false,
loadMask: {msg:'加载数据...'},
clicksToEdit:1,
bbar:[
{text:'添加',handler:function(){
var count = dsPQ.getCount();
var r = new qRowData({idx:dsPQ.getCount(),relation:'',leftParenthesis:'',fieldname1:''});
dsPQ.commitChanges();
dsPQ.insert(count,r);
}
},
{text:'删除',handler:function(){
var reod =sm.getSelected();
if(reod==null){
alert("请选择一行");
return;
}
if(dsPQ.getCount()==1){
stoll=dsPQ.getRange(0,dsPQ.getCount());
stoll[0].set('idx',"");
stoll[0].set('relation',"");
stoll[0].set('leftParenthesis',"");
stoll[0].set('fieldname1',"");
return;
}
dsPQ.remove(reod);
sm.clearSelections();
dsPQ.getView().refresh();
}
},
{text:'全部清除',handler:function(){dsPQ.removeAll();}}
]
});
//获得网格中的值
grida.addListener('afteredit',rowdblclick); //被编辑后的记录
function rowdblclick(e){
var record =e.record;
var allmost="";
var arrlylist="";
var a=record.get("idx");
var b=record.get("relation");
var c=record.get("leftParenthesis");
var d=record.get("fieldname1");
var sto1=dsPQ.getRange(0,dsPQ.getCount());
for(var i=0;i<dsPQ.getCount();i++){
arrlylist+=sto1[i].get("relation")+"ж"+sto1[i].get("leftParenthesis")+"ж"+sto1[i].get("fieldname1")+'*'
}
//alert(arrlylist);
Ext.get("gril2").dom.value=arrlylist;
}
return grida;
}
}
//提交查询数据
function sumbit(){
var all="";
var all1="";
all=Ext.get("gril1").dom.value;
all1=Ext.get("gril1").dom.value;
//var aa=document.getElementById("sdsss").value;
//alert(aa);
Ext.Ajax.request({
url:'',
method:'post',
success: function(response,options){
var result=response.responseText;
if(result==1){
Ext.MessageBox.alert('操作信息','查询成功!');
}else{
Ext.MessageBox.alert('操作信息','查询失败,请检查数据是否正确');
}
},
params: {all:all,all1:all1}
});
}
});
</script>
分享到:
相关推荐
当用户点击地图上的某个点或图层要素时,信息窗口会弹出显示相关详情。 在实际开发中,`ExtPrj`这个压缩包文件可能包含了项目的所有源代码、样式文件、配置文件以及示例数据。开发者可以解压后研究其结构,学习如何...
EXT-JS库的组件化设计使得开发者可以轻松地将这个日历组件与其他EXT-JS组件集成,构建出功能完备的Web应用。 【压缩包子文件的文件名称列表】"extensible-1.0.1"是这个日历组件的版本号。在EXT-JS中,"extensible...
页面中包含一个按钮,当点击时会触发弹出框显示“你好,中国”。 #### 四、深入理解Ext的核心概念 **知识点9:Ext.onReady()函数** 这是Ext框架提供的关键函数,用于确保DOM加载完成再执行后续代码,避免因DOM未...
- **日期选择器**: 一个弹出式的日历组件,用于选择日期。 8. **数据与ComboBox** - **数据处理**: ExtJS提供了强大的数据处理能力,包括数据代理、数据读取器等功能。 - **ComboBox**: 下拉列表框组件,常用于...
3. **提示和通知**:通过弹出提示框或通知条等形式,向用户提供即时反馈。 #### 五、案例分析与实战技巧 1. **登录界面设计**:介绍如何使用EXT构建一个安全且友好的登录界面,包括验证逻辑的实现。 2. **数据展示...
6. **对话框和窗口**:包含弹出框、提示框和自定义窗口的创建,以及如何实现拖放和大小调整。 7. **菜单和工具栏**:介绍如何构建动态菜单和工具栏,提供上下文敏感的功能选项。 8. **Ajax和远程操作**:讲解如何...
它包括一个日历弹出窗口,支持多种日期格式和范围限制。 ##### 7. **EditorGridPanel(编辑网格面板)** EditorGridPanel是一种特殊的GridPanel,它包含了内置的编辑功能。用户可以直接在单元格内进行编辑,无需...
`MessageBox`是EXT提供的一个弹出对话框组件,可以用来显示提示信息或者确认对话框: ```javascript Ext.MessageBox.show({ title: '提示', msg: '这是一个消息框', buttons: Ext.MessageBox.OK }); ``` ##### ...
再者,EXT2.2的弹出窗口功能得到了增强,新增了地图缩放功能。这表明EXT2.2支持集成地图服务,并且能够提供交互式的地图缩放操作,这对于地理信息系统或者地图应用的开发是巨大的进步。 此外,EXT2.2还支持多选项的...
上面的代码展示了如何使用`Ext.onReady()`来弹出一个警告框,告知用户Ext已经配置成功。 #### 五、Ext.Element对象:Ext的核心 `Ext.Element`是Ext 2.0的核心功能之一,提供了对DOM元素的强大操作能力。通过`Ext....
- **主要用途**:用于显示弹出窗口、模态对话框等。 **2.15 Toolbar (Ext.Toolbar)** - **xtype**: `toolbar` - **功能描述**:Toolbar 是一个包含按钮、文本框等控件的工具栏。 - **主要用途**:为用户提供快速...
这些组件封装了常见的UI行为,如弹出对话框、数据网格展示等,大大降低了开发的复杂度。 1. **MessageBox**:用于显示提示消息、警告或确认对话框,增强了用户体验。 2. **Grid**:数据网格组件,用于展示表格...
5. 编辑功能:EXT Grid可以开启行内编辑或者弹出式编辑,方便用户直接在表格中修改数据。 6. Ajax集成:EXT Grid通过Ajax请求从服务器获取或提交数据,这使得页面能够在不刷新的情况下更新内容,提供了流畅的用户...
8. **工具提示和弹出框**:EXT提供了强大的提示和弹出框组件,可以自定义样式和行为。 9. **可访问性**:EXT遵循WAI-ARIA标准,提升了组件的可访问性和可用性,尤其对无障碍应用友好。 10. **国际化支持**:EXT内置...
`Menu`组件用于创建下拉菜单或弹出菜单。它支持添加各种类型的菜单项,如普通菜单项、分割线等。通过简单的配置,就可以创建出功能丰富的菜单。 #### 模板(Templates) 模板是ExtJS中用于生成HTML内容的强大工具。...
例如,在用户点击某个控件时弹出提示框,告诉用户该控件的用途。 **示例代码:** ```javascript Ext.QuickTips.init(); ``` ### 四、总结 通过对Ext控件的深入了解,我们不仅掌握了创建基本控件的方法,还学会了...
` 表示当Ext框架正确配置之后,会弹出一个恭喜的提示框。 2. **元素选择和操作**:Ext框架提供了多种方式来选择和操作页面上的DOM元素。例如,`Ext.get('myDiv')`用于获取ID为`myDiv`的DOM元素,`myDiv.addClass('...
在EXT JS框架中,`MessageBox`是一个非常实用的组件,用于弹出对话框与用户进行交互。本教程将深入探讨`MessageBox`的使用方法及其在实际开发中的应用。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用...
8. 窗口与对话框:书里会详细讲述如何创建弹出窗口和模态对话框,以及如何使用拖放、弹出效果等功能,提高用户体验。 9. 自定义组件:高级主题中,作者将指导读者如何根据需求创建自定义组件,扩展Ext JS 3的功能,...