您的位置：首页 > Web前端 > JavaScript

ExtJS实现完美Grid(3)--查询面板

2013-09-11 12:52 477 查看 
一般我们在列表显示数据时都有提供一个查询面板，虽然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);

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

让我们来看一下效果

隐藏状态：



打开状态：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航