刚写的B/S高级查询界面(基于ExtJs框架)
这几天赶着做一个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.****.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>
搞掂,收工。
<!-- google_ad_client = "pub-5395599807454886"; /* 468x15文字连接广告, 创建于 08-11-21 */ google_ad_slot = "5196248270"; google_ad_width = 468; google_ad_height = 15; //-->