使用Ext.Extend:使用Ext的JsonReader读取本地数据实现grid分页

分页基本上是web程序员一个永恒的话题.还好无论什么开发语言我们都有很多控件可以使用.在ext当中,也有分页控件,不过官方提供的例子是使用 ScriptTagProxy,而网上绝大部分的例子不是ScriptTagProxy就是HttpProxy来进行数据加载的.但是很多情况下我们不得 不进行本地数据加载(比如是两个人使用接口方式进行开发的情况下),下面讲讲我在工作上使用的JsonReader读取本地数据实现grid分页.

要实现本功能,需要注意以下问题:

1.要自定义相关的数据获取函数(第一页,最后一页之类的按钮事件).

2.要定义分页控件的总数(因为默认的情况下,分页控件是加载store的所有数据,这样就不能实现我们的功能).

以上两个问题基本都是分页控件的主要问题(之前用.net的一个分页控件也是这样的问题)

 

首先因为是要自定义按钮事件,所以我们采用扩展PagingToolbar的方式来重写相关事件

Ext.PagingToolbarEx = Ext.extend(Ext.PagingToolbar,{
    onClick : function(which){
        var store = this.store;
        switch(which){
            case "first":
               // this.doLoad(0);//自定义获取数据函数
            break;
            case "prev":
                this.doLoad(Math.max(0, this.cursor-this.pageSize));
            break;
            case "next":
                alert();//自定义获取数据函数
            break;
            case "last":
                var total = store.getTotalCount();
                var extra = total % this.pageSize;
                var lastStart = extra ? (total - extra) : total-this.pageSize;
                this.doLoad(lastStart);
            break;
            case "refresh":
                this.doLoad(this.cursor);
            break;
        }
    }

});

然后就进行相关控件的构造,代码如下:

Ext.onReady(function(){
    var Student = new Ext.data.Record.create([
        {name:'id'},
        {name:'name'},
        {name:'email'},
        {name:'sex'},
        {name:'bornDate',dateFormat:'Y年m月d日'}
    ]);
    var data = {"totalCount":"54671",’root’:[{
        id:1,
        name:'小王',
        sex:'男',
        email:'[email protected]',
        bornDate:'1991-4-4'
    },{
        id:2,
        name:'小李',
        sex:'男',
        email:'[email protected]',
        bornDate:'1992-5-6'
    },{
        id:3,
        name:'小兰',
        sex:'女',
        email:'[email protected]',
        bornDate:'1993-3-7'
    }]};

    var store = new Ext.data.Store({
        idProperty: ‘id’,
        proxy:new Ext.data.MemoryProxy(data),
        reader:new Ext.data.JsonReader({
            root:’root’,totalProperty:’totalCount’    //指定分页控件属性用,用于解决第二个问题
        },Student)
    });

    var pagingBar = new Ext.PagingToolbarEx({
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: ‘显示第 {0} 条到 {1} 条记录,共 {2} 条’,
        emptyMsg: "没有记录",
        OnClick:function(witch){alert(witch);},
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });

    var cm = new Ext.grid.ColumnModel([{
        header:'ID',
        dataIndex:'id',
        sortable:true,
        editor:new Ext.form.TextField()
    },{
        header:'姓名',
        dataIndex:'name',
        sortable:true,
        editor:new Ext.form.TextField()
    },{
        header:'性别',
        dataIndex:'sex',
        editor:new Ext.form.ComboBox({
        transform:'sexList',
        triggerAction:'all',
        lazyRender:true,
        hiddenName:'sexlist'
    })},{
        header:'电子邮件',
        dataIndex:'email',
        sortable:true,
        editor:new Ext.form.TextField()
    },{
        header:'出生日期',
        dataIndex:'bornDate',
        width:120,
        renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
        editor:new Ext.form.DateField({format:'Y年m月d日'})
    }]);
    var grid = new Ext.grid.EditorGridPanel({
        renderTo:’list’,
        title:’学生基本信息管理’,
        height:200,
        width:800,
        cm:cm,
        store:store,
        clicksToEdit:1,
        tbar:[{text:"新建记录"},{text:"删除记录"}],
        bbar: pagingBar
    });
    grid.render();
    store.load(); //加载数据
});