`
诸葛蛋疼
  • 浏览: 36885 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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>




















分享到:
评论

相关推荐

    Ext Google Map 简易开发框架

    当用户点击地图上的某个点或图层要素时,信息窗口会弹出显示相关详情。 在实际开发中,`ExtPrj`这个压缩包文件可能包含了项目的所有源代码、样式文件、配置文件以及示例数据。开发者可以解压后研究其结构,学习如何...

    ext3.2 常强大的日历功能

    EXT-JS库的组件化设计使得开发者可以轻松地将这个日历组件与其他EXT-JS组件集成,构建出功能完备的Web应用。 【压缩包子文件的文件名称列表】"extensible-1.0.1"是这个日历组件的版本号。在EXT-JS中,"extensible...

    ext入门必学

    页面中包含一个按钮,当点击时会触发弹出框显示“你好,中国”。 #### 四、深入理解Ext的核心概念 **知识点9:Ext.onReady()函数** 这是Ext框架提供的关键函数,用于确保DOM加载完成再执行后续代码,避免因DOM未...

    Ext-JS框架中文文档

    - **日期选择器**: 一个弹出式的日历组件,用于选择日期。 8. **数据与ComboBox** - **数据处理**: ExtJS提供了强大的数据处理能力,包括数据代理、数据读取器等功能。 - **ComboBox**: 下拉列表框组件,常用于...

    新版EXT教程

    3. **提示和通知**:通过弹出提示框或通知条等形式,向用户提供即时反馈。 #### 五、案例分析与实战技巧 1. **登录界面设计**:介绍如何使用EXT构建一个安全且友好的登录界面,包括验证逻辑的实现。 2. **数据展示...

    深入浅出Ext JS(第2版) 随书光盘提供的书中实例

    6. **对话框和窗口**:包含弹出框、提示框和自定义窗口的创建,以及如何实现拖放和大小调整。 7. **菜单和工具栏**:介绍如何构建动态菜单和工具栏,提供上下文敏感的功能选项。 8. **Ajax和远程操作**:讲解如何...

    Ext组件说明 Ext组件概述

    它包括一个日历弹出窗口,支持多种日期格式和范围限制。 ##### 7. **EditorGridPanel(编辑网格面板)** EditorGridPanel是一种特殊的GridPanel,它包含了内置的编辑功能。用户可以直接在单元格内进行编辑,无需...

    ext 编程开发指南

    `MessageBox`是EXT提供的一个弹出对话框组件,可以用来显示提示信息或者确认对话框: ```javascript Ext.MessageBox.show({ title: '提示', msg: '这是一个消息框', buttons: Ext.MessageBox.OK }); ``` ##### ...

    ext2.2-API文档-jar-doc

    再者,EXT2.2的弹出窗口功能得到了增强,新增了地图缩放功能。这表明EXT2.2支持集成地图服务,并且能够提供交互式的地图缩放操作,这对于地理信息系统或者地图应用的开发是巨大的进步。 此外,EXT2.2还支持多选项的...

    简单介绍Ext 2.0

    上面的代码展示了如何使用`Ext.onReady()`来弹出一个警告框,告知用户Ext已经配置成功。 #### 五、Ext.Element对象:Ext的核心 `Ext.Element`是Ext 2.0的核心功能之一,提供了对DOM元素的强大操作能力。通过`Ext....

    Ext组件描述,各个组件含义

    - **主要用途**:用于显示弹出窗口、模态对话框等。 **2.15 Toolbar (Ext.Toolbar)** - **xtype**: `toolbar` - **功能描述**:Toolbar 是一个包含按钮、文本框等控件的工具栏。 - **主要用途**:为用户提供快速...

    ext js中文开发手册

    这些组件封装了常见的UI行为,如弹出对话框、数据网格展示等,大大降低了开发的复杂度。 1. **MessageBox**:用于显示提示消息、警告或确认对话框,增强了用户体验。 2. **Grid**:数据网格组件,用于展示表格...

    JSP中使用EXT实现grid table

    5. 编辑功能:EXT Grid可以开启行内编辑或者弹出式编辑,方便用户直接在表格中修改数据。 6. Ajax集成:EXT Grid通过Ajax请求从服务器获取或提交数据,这使得页面能够在不刷新的情况下更新内容,提供了流畅的用户...

    EXT中文手册(PDF)

    8. **工具提示和弹出框**:EXT提供了强大的提示和弹出框组件,可以自定义样式和行为。 9. **可访问性**:EXT遵循WAI-ARIA标准,提升了组件的可访问性和可用性,尤其对无障碍应用友好。 10. **国际化支持**:EXT内置...

    ext-word文档

    `Menu`组件用于创建下拉菜单或弹出菜单。它支持添加各种类型的菜单项,如普通菜单项、分割线等。通过简单的配置,就可以创建出功能丰富的菜单。 #### 模板(Templates) 模板是ExtJS中用于生成HTML内容的强大工具。...

    Ext控件大全,适合新手学习

    例如,在用户点击某个控件时弹出提示框,告诉用户该控件的用途。 **示例代码:** ```javascript Ext.QuickTips.init(); ``` ### 四、总结 通过对Ext控件的深入了解,我们不仅掌握了创建基本控件的方法,还学会了...

    EXT中文手册.pdf

    ` 表示当Ext框架正确配置之后,会弹出一个恭喜的提示框。 2. **元素选择和操作**:Ext框架提供了多种方式来选择和操作页面上的DOM元素。例如,`Ext.get('myDiv')`用于获取ID为`myDiv`的DOM元素,`myDiv.addClass('...

    Ext--MessageBox教程

    在EXT JS框架中,`MessageBox`是一个非常实用的组件,用于弹出对话框与用户进行交互。本教程将深入探讨`MessageBox`的使用方法及其在实际开发中的应用。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用...

    JavaScript凌厉开发(Ext_JS_3详解与实践

    8. 窗口与对话框:书里会详细讲述如何创建弹出窗口和模态对话框,以及如何使用拖放、弹出效果等功能,提高用户体验。 9. 自定义组件:高级主题中,作者将指导读者如何根据需求创建自定义组件,扩展Ext JS 3的功能,...

Global site tag (gtag.js) - Google Analytics