extjs grid搜索分页实例
extjs grid搜索分页实例最近要做一个extjs.grid的搜索，差点就要自己遍历data数据了，幸好，多看了看资料！知道只要在ds.load()之内做一些小的配置就能简单的实现查询！！！
以后做东西之前，不要茫茫然的拿过来就做，先上网查查，在做！站在巨人的肩膀上么，才能看得远。
谢谢一下这篇日志的发表人。
<script type="text/javascript">
Ext.onReady(function(){
var ds = new Ext.data.Store({//这是数据源
proxy : new Ext.data.HttpProxy({url:'index.php?model=user&action=list&'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'user_id'
},[
'user_id','username','real_name','telephone','station_status','headship'
])
});
var colModel = new Ext.grid.ColumnModel([//定义列
{header:'ID',width:50,sortable:true,dataIndex:'user_id'},
{id:'title',header:'用户名', width:100,sortable:true,dataIndex:'username'},
{header:'真实姓名',width:100,sortable:true,dataIndex:'real_name'},
{header:'电话',width:100,sortable:true,dataIndex:'telephone'},
{header:'岗位状态',width:100,sortable:true,dataIndex:'station_status'},
{header:'职务',width:100,sortable:true,dataIndex:'headship'}
]);
var tb = new Ext.Toolbar('north-div');//创建一个工具条
tb.add({
text: '添加',
handler: newUser
},{
text: '编辑',
handler: editUser
},{
text: '删除',
handler: delUser
});
var grid = new Ext.grid.GridPanel({//列表
border:false,
region:'south',
height:500,
loadMask: true,
el:'center',
title:'条目列表',
store: ds,
cm: colModel,
autoScroll: true,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
})
});
var top = new Ext.FormPanel({//这里是搜索表单
buttonAlign:'right',
labelWidth:70,
region:'center',
frame:true,
title: '搜索',
items: [{
layout:'column',
items:[{
columnWidth:.33,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '用户名',
id: 'username',
name: 'username',
anchor:'90%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '姓名',
name: 'real_name',
id: 'real_name',
anchor:'90%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
id: 'email',
vtype:'email',
anchor:'90%'
}]
}]
}
],
buttons: [{
text: '保存',
handler:function(){
// 这里是关键，重新载入数据源，并把搜索表单值提交
ds.load({params:{start:0, limit:20,
username:Ext.get('username').dom.value,
real_name:Ext.get('real_name').dom.value,
email:Ext.get('email').dom.value}});
}
},{
text: '重置',
handler:function(){top.form.reset();}
}]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[{
border:false,
region:'north',
contentEl:'north-div',
tbar:tb,
height:26
},top,
grid
]}
);
ds.load({params:{start:0, limit:20}});
// 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了
ds.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
username:Ext.get('username').dom.value,
real_name:Ext.get('real_name').dom.value,
email:Ext.get('email').dom.value
});
});
function newUser() {
parent.newTab('400012','添加用户','index.php?model=user&action=add');
}
function editUser() {
var s = grid.getSelectionModel().getSelections();
if (s.length==0) {
Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
}
for (i=0;i<s.length;i++) {
var id = s[i].id;
parent.newTab('400012'+id,'编辑用户','index.php?model=user&action=add&user_id='+id);
}
}
function delUser() {
var ids = getId(grid);
if (ids) {
Ext.Msg.confirm('确认', '真的要删除吗？', function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url: 'index.php?model=user&action=delete&ids='+ids,
success: function(result){
json = Ext.util.JSON.decode(result.responseText);
ds.reload();
}
});
}
});
} else {
Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
}
}
loadend();
});
</script>
<div id="north-div"></div>
<div id="center"></div>
来源：http://www.phpchina.com/bbs/redirect.php?tid=60381&goto=lastpost&sid=wHsSC8
页:
[1]