extjs4做的grid，带分页，搜索

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