ext高级查询弹出框

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>&nbsp;&nbsp;字段:<br>&nbsp;&nbsp;&nbsp;&nbsp;·在下面的行中设定字段的限定条件<br>&nbsp;&nbsp;&nbsp;&nbsp;·查询条件会在下面的文本区域中组合<br>&nbsp;&nbsp;&nbsp;&nbsp;·你可以改变条件的组合方式(如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:'&nbsp;&nbsp;' 
   }] 
   },{
            layout:'column',
            items:[{ 
   xtype:'label',
   fieldLabel:'a', 
   html:'<font color=#808080 style="font-size:12px">设置查询条件<br>&nbsp;&nbsp;&nbsp;&nbsp;·在下面的行中自定义设定查询条件</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>




















你可能感兴趣的:(html,css,ext,prototype)