刚写的B/S高级查询界面（基于ExtJs框架）

最新推荐文章于 2015-04-09 11:05:45 发布

iteye_3619

最新推荐文章于 2015-04-09 11:05:45 发布

阅读量141

点赞数

文章标签：框架 EXT CSS JavaScript Google ViewUI

这几天赶着做一个B/S系统，基于ExtJs框架，从中学了不少东西，今天写的高级查询界面感觉比较有意义，很多人应该也用得着，特拿出来共享一下。当然没正式完工，余下与服务器交互、Lookup列表、取生成查询条件一部分没有完成，做得有点腻了，先放出来，曾经做过的不妨交流一下。

界面：

查询界面

代码：

 
  <DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html><head><title>XXXX系统V1.0</title> 
 <metaname="Author"contect="彭国辉"> 
 <meta name="Keywords" content="blog:http://blog.csdn.net/nhconch" /> 
 <metahttp-equiv="Content-Type"content="text/html;charset=utf8"> 
 <linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"> 
 <linkrel="stylesheet"type="text/css"href="resources/css/hndc.css"> 
 <scripttype="text/javascript"src="adapter/ext/ext-base.js"></script> 
 <scripttype="text/javascript"src="ext-all.js"></script> 
 <scripttype="text/javascript"src="source/locale/ext-lang-zh_CN.js"></script> 
 <scripttype="text/javascript"> 
 Ext.BLANK_IMAGE_URL='resources/images/default/s.gif'; 
Ext.onReady(function(){
 vardsPQ=newExt.data.JsonStore({ 
fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
});
 varfieldsDef=newExt.data.JsonStore({ 
fields:['value','text','type'],
data:[
{value:'A.Billno',text:'预约单号',type:'string'},
{value:'A.Date',text:'时间',type:'date'},
{value:'A.boolean',text:'布尔',type:'boolean'},
{value:'A.int',text:'整形',type:'int'},
{value:'A.float',text:'浮点',type:'float'},
{value:'A.lookup',text:'Lookup',type:'lookup',data:[[1,'list1'],[2,'list2'],[3,'list3']]}
]
});
 varnumericOp=datetimeOp=newExt.data.SimpleStore({ 
fields:['value','text'],
 data:[['=','='],['<>','<>'],['<','<'],['<=','<='],['<','>'],['>=','>='],['isnull','空白'],['isnotnull','非空白']] 
});
 varstringOp=newExt.data.SimpleStore({ 
fields:['value','text'],
 data:[['=','='],['<>','<>'],['<','<'],['<','>'], 
['like|%','以...开头'],['like%|','以...结尾'],['like%|%','包含字符'],['notlike%|%','不包含字符'],
['isnull','空白'],['isnotnull','非空白']]
});
 varlookupOp=booleanOp=newExt.data.SimpleStore({ 
fields:['value','text'],
 data:[['=','='],['<>','<>'],['isnull','空白'],['isnotnull','非空白']] 
});
 varobjGridTextEditor=newExt.grid.GridEditor(newExt.form.TextField()); 
 //varobjGridMemoEditor=newExt.grid.GridEditor(newExt.form.TextArea()); 
 varobjGridDateEditor=newExt.grid.GridEditor(newExt.form.DateField({format:'Y-m-d'})); 
 varobjGridIntegerEditor=newExt.grid.GridEditor(newExt.form.NumberField({allowBlank:false,allowNegative:false,allowDecimals:false})); 
 varobjGridFloatEditor=newExt.grid.GridEditor(newExt.form.NumberField({allowBlank:false,allowNegative:false})); 
 varobjGridBooleanEditor=newExt.grid.GridEditor(newExt.form.ComboBox({ 
store:[[true,'是'],[false,'否']],
mode:'local',
readOnly:true,
triggerAction:'all',
allowBlank:false,
editable:false,
forceSelection:true,
blankText:'请选择...'
}));
 varobjGridLookupEditor=newExt.grid.GridEditor(newExt.form.ComboBox({ 
//store:[],
mode:'local',
readOnly:true,
triggerAction:'all',
allowBlank:false,
editable:false,
forceSelection:true,
blankText:'请选择...'
}));
functionfileListChange(field,newValue,oldValue){
//alert(field);
}
functionfindRecordValue(store,prop,propValue,field){
varrecord;
 if(store.getCount()>0){ 
store.each(function(r){
if(r.data[prop]==propValue){
 rrecord=r; 
returnfalse;
}
});
}
returnrecord?record.data[field]:'';
}
functiondisplayOperator(v){
switch(v){
case'isnull':return'空白';
case'isnotnull':return'非空白';
case'like|%':return'以...开头';
case'like%|':return'以...结尾';
case'like%|%':return'包含字符';
case'notlike%|%':return'不包含字符';
default:returnv;
}
}
functiondisplayValue(v,params,record){
 vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type'); 
 varoperator=record.get('operator'); 
 if(operator=='isnull'||operator=='isnotnull')return''; 
switch(dataType){
case'date':returnv?v.dateFormat('Y-m-d'):'';
case'boolean':return(v?'是':'否');
default:returnv;
}
}
 varqRowData=Ext.data.Record.create([ 
{name:'idx',type:'int'},
{name:'relation',type:'string'},
{name:'leftParenthesis',type:'string'},
{name:'fieldname',type:'string'},
{name:'operator',type:'string'},
{name:'value',type:'string'},
{name:'rightParenthesis',type:'string'}
]);
 vardsPQ=newExt.data.JsonStore({ 
data:[],
fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
});
 varcolM=newExt.grid.ColumnModel([ 
{
header:"关系",
dataIndex:"relation",
width:50,
 renderer:function(v){return(v=='and'?'并且':'或者')}, 
editor:newExt.form.ComboBox({
store:[['and','并且'],['or','或者']],
mode:'local',
readOnly:true,
triggerAction:'all',
allowBlank:false,
editable:false,
forceSelection:true,
blankText:'请选择'
})
},{
header:"括号",
dataIndex:"leftParenthesis",
width:40,
editor:newExt.form.ComboBox({
store:['(','((','((','(((','(((('],
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
editable:false
})
},{
header:"字段名",
dataIndex:"fieldname",
width:130,
renderer:function(v){returnfindRecordValue(fieldsDef,'value',v,'text');},
editor:newExt.form.ComboBox({
store:fieldsDef,
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
editable:false,
listeners:{change:fileListChange}
})
},{
header:"运算符",
width:80,
dataIndex:"operator",
renderer:displayOperator
},{
header:"内容",
dataIndex:"value",
width:130,
renderer:displayValue
},{
header:"括号",
width:40,
dataIndex:"rightParenthesis",
editor:newExt.form.ComboBox({
store:[')','))',')))','))))'],
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
editable:false
})
}
]);
 vargrdDPQuery=newExt.grid.EditorGridPanel({ 
height:500,
width:490,
renderTo:"hello",
cm:colM,
sm:newExt.grid.RowSelectionModel({singleSelect:false}),
store:dsPQ,
region:'center',
border:false,
enableColumnMove:false,
enableHdMenu:false,
loadMask:{msg:'加载数据...'},
clicksToEdit:1,
tbar:[
{text:'添加',handler:function(){
 varcount=dsPQ.getCount(); 
 varr=newqRowData({idx:dsPQ.getCount(),relation:'and',leftParenthesis:'',fieldname:'',operator:'=',value:'',rightParenthesis:''}); 
dsPQ.commitChanges();
dsPQ.insert(count,r);
}
},
{text:'删除',handler:function(){
 //store=grid.getStore(); 
 varselections=grdDPQuery.getSelectionModel().getSelections(); 
 for(vari=0;i<selections.length;i++){ 
dsPQ.remove(selections[i]);
}
}
},
{text:'全部清除',handler:function(){dsPQ.removeAll();}}
],
listeners:{
afteredit:function(e){
 if(e.column==2/*e.field=='fieldname'*/){ 
 varoldDataType=findRecordValue(fieldsDef,'value',e.originalValue,'type'); 
 varnewDataType=findRecordValue(fieldsDef,'value',e.value,'type'); 
if(oldDataType!=newDataType){
e.record.set('operator','=');
e.record.set('value','');
}
}
},
cellclick:function(grid,rowIndex,columnIndex,e){
if(columnIndex!=3&&columnIndex!=4)return;
 varrecord=grid.getStore().getAt(rowIndex);//GettheRecord 
 //varfieldName=grid.getColumnModel().getDataIndex(columnIndex);//Getfieldname 
 //vardata=record.get(fieldName); 
 vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type'); 
 if(dataType=='')return;//未选定字段，退出 
 if(columnIndex==3){//绑定运算符 
 vargrdEditor=grid.colModel.getCellEditor(columnIndex,rowIndex); 
if(grdEditor)grdEditor.destroy();
var_store;
switch(dataType){
 case'string':_store=stringOp;break; 
 case'date':_store=datetimeOp;break; 
 case'boolean':_store=booleanOp;break; 
case'int':
 case'float':_store=numericOp;break; 
 case'lookup':_store=lookupOp;break; 
}
 grdEditor=newExt.form.ComboBox({ 
store:_store,
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
editable:false
})
grid.colModel.setEditor(columnIndex,newExt.grid.GridEditor(grdEditor));
}
 elseif(columnIndex==4){//绑定编辑器 
 varoperator=record.get('operator'); 
 if(operator=='isnull'||operator=='isnotnull'){ 
grid.colModel.setEditor(columnIndex,null);
return;
}
vargrdEditor;
switch(dataType){
 case'string':grdEditor=objGridTextEditor;break; 
 case'date':grdEditor=objGridDateEditor;break; 
 case'boolean':grdEditor=objGridBooleanEditor;break; 
 case'int':grdEditor=objGridIntegerEditor;break; 
 case'float':grdEditor=objGridFloatEditor;break; 
 case'lookup':grdEditor=objGridLookupEditor;break; 
}
if(grid.colModel.getCellEditor(columnIndex,rowIndex)!=grdEditor){
grid.colModel.setEditor(columnIndex,grdEditor);
}
}
}
}
});
});
 </script> 
 </head><divid="hello"></div><body> 
 </body></html> 
 

搞掂，收工。