【原创】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>