ExtJS实现完美Grid(3)--查询面板-优快云博客

一般我们在列表显示数据时都有提供一个查询面板，虽然grid工具栏提供有加入按扭和查询框的功能，但是如查我们查询条件多的情况下还是不是太好用， 这篇文章我介绍一下如何在grid的工具栏上加一个强大的查询面板。

   我还在ExtJS实现完美Grid(1)的基础上改

1、首先这们在页面中加一个div标签如下：
<html>
<head>
    <title>grid.htm</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../css/ext-patch.css" />
   <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all.js"></script>
    <script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/gridsearch.js" defer="defer"></script>
</head>
<body style="margin: 0;overflow:hidden">
<div id="form" style="width:100%;height:35;font-size:0;"></div>
<div id="grid" style="width:100%;height:100%;"></div>
</body>
</html>

2、然后我们建一个查询表单，定义一个控制显示隐藏查询面板的变量，然后要把grid的上面工具栏上的按扭移到form表单工具栏上，并且加一个控制显示隐藏的按扭，根据查询面板的内容设一个面板高度

//添加查询表单，expand记录查询表单是否展开
var expand=false;
var addressdata=[['0','中国'],['1','美国'],['2','法国'],['3','新加坡'],['4','马来西亚']];
var addressSelect=new Ext.form.ComboBox({
    fieldLabel:'地址',
    store:new Ext.data.SimpleStore({
     fields:['value','text'],
     data:addressdata
    }),
    emptyText:'请选择',
    mode:'local',
    triggerAction:'all',
    valueFiled:'value',
    displayField:'text',
    width : 120,
    readyOnly:true
});
var form = new Ext.form.FormPanel({
   labelAlign : 'right',
   buttonAlign : 'center',
   bodyStyle : 'padding:0px;margin:0px;padding-top:5px;',//padding:1px;padding-top:5px;
   labelWidth : 60,
   border:0,
   frame : true,
   el:'form',
   tbar : [{
     pressed : true,
     text : '查询',
     handler : function() {
      if(!expand){ //当查询表展开时，设置查询表单的高和grid的高
       document.getElementById('form').style.height = "100px";
       document.getElementById('form').style.overflow = "visible";
       grid.setHeight(document.body.clientHeight-100);
       form.setHeight(100);
       expand=true;
      }else{    //当查询表收缩时，设置查询表单的高和grid的高
       document.getElementById('form').style.height = "34px";
       document.getElementById('form').style.overflow = "hidden";
       grid.setHeight(document.body.clientHeight-34);
       form.setHeight(34);
       expand=false;
      }
     }
    },{
     xtype:'tbseparator'
    },{
    pressed : true,
    text : '新建',
    handler : function() {   
     var p=new Person({
      name:'',
      sex:'',
      birthday:'',
      salary:'',
      action:'<a href="#">操作</a>'
     });
     grid.stopEditing();
     store.insert(0,p);
     grid.startEditing(0,2);
    }
    }, {
     xtype:'tbseparator'
    },{
     pressed : true,
     text : '删除',
     handler : function() {
      var sels=grid.getSelectionModel().getSelections();
      for(var i=0;i<sels.length;i++){
       var record=sels[i];
       store.remove(record);
      }
     }
    }, {
     xtype:'tbseparator'
    },DSButton
   ],
   items : [{
    layout : 'column',
    items : [{
     width : 200,
     layout : 'form',
     defaultType : 'textfield',
     items : [{
      fieldLabel : '姓名',
      name:'name'
     }, {
      fieldLabel : '电话',
      name : 'tel'
     }]
    }, {
      width :200,
      layout : 'form',
      defaultType : 'textfield',
      items : [{
       xtype:'datefield',
       width:120,
       fieldLabel : '出生日期',
       name:'birthday',
       format:'Y-m-d'
      },addressSelect]
    }, {
      width : 60,
      layout : 'form',
      defaultType : 'button',
      items : [{
       xtype:'textfield',
       hideLabel :true,
       style   :'visibility:hidden'
      },{
       text:'确定',
       handler:function (){
        var name=form.getForm().findField("name").getValue();
        var tel=form.getForm().findField("tel").getValue();
        var birthday=form.getForm().findField("birthday").getValue();
        var address=addressSelect.getRawValue();
        //alert(address);
        store.load({
        params:{
         start:start,
         limit:limit,
         action:'search',
         name:name,
         tel:tel,
         birthday:birthday,
         address:address
        }})
       }
      }]
    }]
   }]
});
form.render();

3、然后把刚才建的查询面板组装到grid里面

// 表格组装
var grid = new Ext.grid.EditorGridPanel({
   el : 'grid',
   store : store,
   cm : cm,
   sm : sm,
   region:'center',
     bodyStyle:'width:100%;height:100%',
     autoScroll:true,
     layout:'fit',
     autoExpandColumn:'action',
     tbar:[form],     //加到grid的工具栏上
   bbar:new Ext.PagingToolbar({
    pageSize : limit,
    store : store,
    displayInfo : true,
    displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    emptyMsg : "没有记录"
   })
});   
grid.render();

4、当第一次打开页面时我们把它设成默认隐藏状态

//初始化查询面板和grid的大小，先隐藏查询面板
document.getElementById('form').style.height = "34px";
document.getElementById('form').style.overflow = "hidden";
grid.setHeight(document.body.clientHeight-34);

这样我们就做好了功能强大的查询面板，根据你的项目情况你可以加任意多的条件

让我们来看一下效果

隐藏状态：

打开状态：