Extjs中grid前端分页使用PagingMemoryProxy

Posted 2020-09-03 折翼的飞鸟

    在项目中遇到Grid前端分页，本人也是刚接触extjs没多久，为了实现效果，一直找了很久才实现出来，对于代码中的一些也不能详细的说明出来，

不知道能不能帮助到遇到同样问题的朋友，所以将例子代码贴出来大家一起相互学习下。

 

在项目中时常会用到前端分页的效果，使用grid来进行分页，

在源代码中\\examples\\ux\\data\\PagingMemoryProxy.js，此时要使用该js文件，在项目引用该文件。

<script type="text/javascript" src="ux/data/PagingMemoryProxy.js"></script>

 

分页的工具条是 Ext.toolbar.Paging类，xtype：pagingtoolbar，该工具绑定的store数据和grid绑定数据一样，

dockedItems: [{
    xtype: \'pagingtoolbar\',
    store: me.mystore,
    dock: \'bottom\',
    cls: "smallPagingToolBar",
    inputItemWidth: 50, 
    displayInfo: true,
    doRefresh: function () { 
        me.refresh();
    }
}

 

创建store数据时要注意proxy，本人在使用时不太理解该属性中的信息，只能按照复制粘贴，创建的store数据会根据指定的pageSize，进行自行分页

            me.mystore = Ext.create("Ext.data.Store", {
                fields: me.gridFilds,
                pageSize: 5, // 指定每页显示2条记录
                autoLoad: true,
                data: me.gridData,  /*生成的数组数据*/
                proxy: {
                    type: \'pagingmemory\',  /*引用的PagingMemoryProxy类*/
                    reader: {
                        type: \'json\',
                        totalProperty:\'total\'
                    }
                }
            });

 

以下是完整代码：

Ext.onReady(function(){
    // Ext.Msg.alert("提示","hello world！！！")
    Ext.define("MyGridPanel",{
        /*静态数据，可以从后台获取*/
        gridData:[
            {id:"1001",name:"wind",tel:"18603071234"},
            {id:"1002",name:"小月",tel:"18603073578"},
            {id:"1003",name:"冷清雪",tel:"18603073569"},
            {id:"1004",name:"布隆",tel:"18603073214"},
            {id:"1005",name:"莫甘娜",tel:"18603072568"},
            {id:"1006",name:"阿里",tel:"18603073247"},
            {id:"1001",name:"阿卡丽",tel:"18603071563"},
            {id:"1001",name:"卡特",tel:"18603074758"},
            {id:"1001",name:"死歌",tel:"18603072354"},
        ], //保存数据

        totalCount:0, //数据总条数
        pageSize:5,  //每页显示的条数
        mystore:null, // 创建的store数据对象
        myGridPanel: null , //GridPanel对象
        gridFilds:[], //数据列模型

        /* 构建一个GridPanel组件 */
        CreateGridPanel:function(){
            /* 创建列数据 */
            var gridColumn = [{
                header: "用户ID",
                dataIndex: "id",
                width:100,
                hideable: false,
                sortable: true,
                draggable: false,
            }, {
                header: "用户名",
                width: 180, 
                dataIndex: "name",
                hideable: false,  
                sortable: true,
                draggable: false, 
            }, {
                header: "手机号",
                flex:1, 
                dataIndex: "tel",  
            }];
            
            var me = this;
            for (var i = 0; i < gridColumn.length; i++) {
                me.gridFilds.push(gridColumn[i].dataIndex);
            }

            /* 构建一个store数据 */
            me.totalCount = me.gridData.length;
            me.mystore = Ext.create("Ext.data.Store", {
                fields: me.gridFilds,
                pageSize: me.pageSize, // 指定每页显示2条记录
                autoLoad: true,
                data: me.gridData,
                proxy: {
                    type: \'pagingmemory\',
                    reader: {
                        type: \'json\',
                        totalProperty:\'total\'
                    }
                }
            });

            var picker = Ext.create("Ext.grid.Panel", { 
                store: me.mystore,
                columns: gridColumn,
                layout:"fit", 
                height:350,
                enableColumnHide: false,
                sortableColumns: false, 
                autoScroll: true,
                columnLines: true,  
                noDefaultSelect: true, //不默认选择第一行
                viewConfig:{
                    stripeRows:true,//在表格中显示斑马线 
                },
                dockedItems: [{
                    xtype: \'pagingtoolbar\',
                    store: me.mystore,
                    dock: \'bottom\',
                    cls: "smallPagingToolBar",
                    inputItemWidth: 50, 
                    displayInfo: true,
                    doRefresh: function () { 
                        me.refresh();
                    }
                }, {
                    xtype: "toolbar",
                    dock: "top",
                    height: 40,
                    style: "padding-bottom:0;border-bottom:1px solid #ddd !important",
                    items: [{
                        xtype: \'textfield\',
                        name: \'fastKey\',
                        fieldLabel: \'查找\',
                        labelWidth: 40,
                        labelAlign: "right",
                        emptyText: "没有查询到数据",  // 分页没有数据时，分页右侧显示的内容
                        width: 230,
                        listeners: {
                            change: function (a) {
                                /*过滤查询*/
                                me.filterData();
                            }
                        }
                    }, {
                        xtype: "displayfield",
                        value: "可选择信息("
                    }, {
                        xtype: \'label\',
                        style: "color:red",
                        text: me.totalCount,
                        name: "totalCount"
                    }, {
                        xtype: "displayfield",
                        value: ")条"
                    }, "->"]
                }]
            });

            return picker; 
        },

        refresh:function(){
            //清空筛选输入框的数据,
            var fastKey = this.myGridPanel.query("[name=\'fastKey\']")[0];
            fastKey.setValue("");
            /*重新加载数据*/
            this.filterData(); 
        },

        /*筛选数据*/
        filterData: function () {
            var me = this;
            var fastKey = me.myGridPanel.query("[name=\'fastKey\']")[0];
            var searchValue = fastKey.getValue().toString().toLowerCase(),
                newData = [];  //newData保存筛选出来的数据
            if (searchValue == "") { 
                newData = me.gridData;
            } else {
                for (var i = 0, len = me.gridData.length; i < len; i++) {
                    for (var j = 1, jlen = me.gridFilds.length; j < jlen; j++) {
                        if (me.gridData[i][me.gridFilds[j]] && me.gridData[i][me.gridFilds[j]].toString().toLowerCase().indexOf(searchValue) >= 0) {
                            newData.push(me.gridData[i]);
                            break;
                        }
                    }
                }
            } 
            /*重新加载数据*/
            me.myGridPanel.store.loadData(newData);
            me.myGridPanel.store.getProxy().data = newData; //更新在缓存的数据
            me.myGridPanel.store.loadPage(1); //重新刷新
            me.myGridPanel.query("[name=\'totalCount\']")[0].setText(newData.length);
        },

        /*创建窗体*/
        CreateWindow:function(){
            /*构建gridpanel组件*/
            var me = this;
            me.myGridPanel = me.CreateGridPanel();
            var win = Ext.create("Ext.window.Window",{
                title:"Grid前端分页",
                width:500,
                height:400,
                id:"MyWindow", 
                renderTo:Ext.getBody(),
                items:me.myGridPanel
            });
            win.show();
        }
    });
    var mygridpanel = Ext.create("MyGridPanel");
    mygridpanel.CreateWindow();

});

效果图：