当前位置: 代码迷 >> JavaScript >> Ext.grid.GridPanel+WEB SERVICE分页-新手
  详细解决方案

Ext.grid.GridPanel+WEB SERVICE分页-新手

热度:301   发布时间:2012-03-30 17:32:09.0
Ext.grid.GridPanel+WEB SERVICE分页---新手求助
最近公司做一个项目是把以前的WIN32程序WEB化,我用EXTJS3.0+.NET做,做表数据显示时分页功能始终不能实现,数据始终在一页上面,由于接触EXTJS不久,所以请高手些帮忙看一下,下面是源代码:
JScript code

var cm = new Ext.grid.ColumnModel([
            {header:'ROLEID', dataIndex:'ROLEID',width:0,hidden:true},
            {header:'角色名', dataIndex:'ROLENAME', sortable:true,width:480}
                ]);
    // 数据源
    store = new Ext.data.Store({
        url: '../EgsmWebService.asmx/getRoles',  
        reader: new Ext.data.XmlReader(
            {
                totalRecords: 'rolecount',    
                record: 'roleinfo'      
            },
            [
                {name:'ROLEID'},
                {name: 'ROLENAME'}
            ]
        )
    });    
    store.setDefaultSort('ROLEID', 'asc');    
    var bbar = new Ext.PagingToolbar(
        {
            pageSize: 12,
            store: store,
            displayInfo: true,
            displayMsg: '当前显示 {0} - {1} 条,共 {2} 条',
            emptyMsg: "无数据"
        }
    );     
    // GridPanel 组件
    grid = new Ext.grid.GridPanel({
        frame: true,
        sortable:true,
        enableHdMenu: false,
        width :480,
        height:300,
        loadMask: {msg:'正在加载数据,请稍侯……'},
        store: store,
        cm: cm,
        el:'rolegrid',
        bbar: bbar,
        viewConfig: {
            forceFit:true
        }
    });
     grid.on("cellclick",function (g,r,c,e){
        ds = grid.getStore();
        record=grid.getSelectionModel().getSelected();
    });
    grid.addListener('rowdblclick',function(t,r,e){});
    grid.render();    
    store.load({params:{start:0,limit:12}}); 


网上找了很多例子,都这么写的,但是我这么写就不行,我的数据也不只12行,它把所有数据都显示在一页上面,多了的就加了滚动条,请高手门帮忙解决一下。小弟先谢过了```

------解决方案--------------------
刚刚下去做了个demo, 可以基本确定的是楼主没有理解ext分页的操作流程。
当GridPanel加上PagingToolbar之后, 每次请求数据或者点上一页或下一页的时候, ajax都会向后台发送至少两个参数:start, limit, 你debug以下后台就知道了。所以ext分页是靠后台利用这两个参数取合适的数据来做的。
因为我刚才测试的时候我PagingToolbar的pageSize限制为3, 但是我发送4条数据页面还是现实4条,所以我猜测你后台都是取出所有的数据。
如果你看得懂jsp, 我的测试代码给你看看:
1.jsp:后台取数据用。我没有真连数据库,只是模拟取数据
Java code

<%
        request.setCharacterEncoding("utf-8");
        String _start = request.getParameter("start");
        String _limit = request.getParameter("limit");
        int start = Integer.parseInt(_start);
        int limit = Integer.parseInt(_limit);
        //返回的json字符串
        String responseString = "{total:50,data:[";
        for(int i=0; i<limit; i++){
                responseString+= ("{id: 'id" + i+start + "',name:'name" + i+start + "',email:'email" + i+start + "'}");
                if(i!=limit-1){
                        responseString+= ","; 
                }
        }
        responseString+="]}";
        
        System.out.println(responseString);
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(responseString);
        response.flushBuffer();
        response.getWriter().close();
%> 
  相关解决方案