【原创】extjs4做的grid,带分页,搜索
最终效果图:
服务器端数据格式输出:
{"total":100,"items":[{"id":0,"name":"aaaa0","time":"2009-23-0","phone":"000-2342442"},{"id":1,"name":"aaaa1","time":"2009-23-1","phone":"010-2342442"},{"id":2,"name":"aaaa2","time":"2009-23-2","phone":"020-2342442"},{"id":3,"name":"aaaa3","time":"2009-23-3","phone":"030-2342442"},{"id":4,"name":"aaaa4","time":"2009-23-4","phone":"040-2342442"},{"id":5,"name":"aaaa5","time":"2009-23-5","phone":"050-2342442"},{"id":6,"name":"aaaa6","time":"2009-23-6","phone":"060-2342442"},{"id":7,"name":"aaaa7","time":"2009-23-7","phone":"070-2342442"},{"id":8,"name":"aaaa8","time":"2009-23-8","phone":"080-2342442"},{"id":9,"name":"aaaa9","time":"2009-23-9","phone":"090-2342442"}]}
服务器端参数接受:
int page = int.Parse(context.Request["page"]);//当前第几页,从1开始
int pagesize = int.Parse(context.Request["limit"]);//每页显示数
前台js部分:
<script type="text/javascript">
Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function () {
Ext.define('MyData', {
extend: 'Ext.data.Model',
fields: [
{ name: "id", type: "int" }, //第一个必须指定mapping,其他可以省略
'name', 'time', 'phone'
]
});
var mystore = Ext.create('Ext.data.Store', {
//分页大小
pageSize: 10,
model: 'MyData',
proxy: {
type: 'ajax',
url: 'loadgriddata.ashx',
reader: { root: 'items', totalProperty: 'total' }
},
sorters: [{
property: 'id', //排序字段
direction: 'asc'// 默认ASC
}]
})
var panel = Ext.create('Ext.form.Panel', {
title: '按条件搜索',
width: 600,
defaultType: 'textfield',
frame: true,
method: 'POST',
collapsible: true,//可折叠
bodyPadding: 5,
layout: 'column',
margin: '0 0 10 0',
items: [{
fieldLabel: '姓名',
labelWidth: 40,
id: 'name'
}, {
xtype: 'button',
text: '搜索',
margin: '0 0 0 5',
handler: function () {
var name = Ext.getCmp('name').getValue(); //获取文本框值
if (name !="") {
mystore.load({ params: { name: name} });//传递参数
}
}
}],
renderTo: Ext.getBody()
})
var grid = Ext.create('Ext.grid.Panel', {
title: 'grid加载远程数据',
width: 600,
store: mystore,
loadMask: true, //加载提示{ msg: '正在加载数据,请稍侯……' }
selModel: new Ext.selection.CheckboxModel, //添加checkbox列
columns: [{
header: '姓名', dataIndex: 'name'
}, {
header: '时间', dataIndex: 'time', width: 150
}, {
header: '电话', dataIndex: 'phone'
}],
dockedItems: [
{
xtype: 'pagingtoolbar',
store: mystore, // same store GridPanel is using
dock: 'bottom', //分页 位置
emptyMsg: '没有数据',
displayInfo: true,
displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
beforePageText: '第',
afterPageText: '页/共{0}页'
}, {
xtype: 'toolbar',
items: [{
iconCls: 'icon-add',
text: 'Add',
scope: this, //添加
handler: function () {
Panel.show(); //显示
}
}, {
iconCls: 'icon-delete',
text: 'Delete',
//disabled: true,
itemId: 'delete',
scope: this,
handler: function () {
//var selModel = grid.getSelectionModel();
var selected = grid.getSelectionModel().getSelection();
var Ids = []; //要删除的id
Ext.each(selected, function (item) {
Ids.push(item.data.id); //id 对应映射字段
})
//alert(Ids);
}
}]
}],
listeners: {
//监听单击事件 records 当前行 对象
itemclick: function (dv, records, item, index, e) {
//alert(record.data.id);
}, selectionchange: function (model, records) {
if (records[0]) {
Panel.show(); //显示
Panel.loadRecord(records[0]);
}
}
},
renderTo: Ext.getBody()
})
//初始加载第1页
mystore.loadPage(1);
var Panel = Ext.create('Ext.form.Panel', {
title: '表单',
width: 300,
frame: true,
bodyPadding: 5,
//closable:true,//是否可关闭
hidden: true, //隐藏
margin: '10 0 0 0',
defaultType: 'textfield', //name对应grid列中的dataIndex
items: [{ fieldLabel: 'name', name: 'name' }, { fieldLabel: 'time', name: 'time' }, { fieldLabel: 'phone', name: 'phone'}],
renderTo: Ext.getBody(),
buttons: [{ text: '确定' }, { text: '取消'}]
});
})
</script>
posted on 2011-09-02 17:31 BarneyZhang 阅读(10323) 评论(5) 编辑 收藏 举报