(24)ExtJS之表格加载远程数据及其分页显示

Ext.onReady(function(){
	
	
	var itemsPerPage=10;//指定分页大小
	var store=Ext.create('Ext.data.Store',{
		autoLoad:{start:0,limit:itemsPerPage},
		fields:['id','name','age'],
		pageSize:itemsPerPage,//设置分页大小
		proxy:{
			type:'ajax',
			url:'base/018_fenye.jsp',
			reader:{
				type:'json',
				root:'root',
				totalProperty:'totalProperty'
			}	
		}
		
	});
	
	//创建表格组件
	Ext.create('Ext.grid.Panel',{
			title:'Ext.toolbar.Paging示例',
			renderTo:Ext.getBody(),
			width:'400px',
			height:'400px',
			style:'margin-left:300px;',
			store:store,
			columns:[//配置表格列
			{header:'id',width:30,dataIndex:'id',sortable:true},
			{header:'姓名',width:80,dataIndex:'name',sortable:true},
			{header:'年龄',width:80,dataIndex:'age',sortable:true}
			],
			bbar:[{
				xtype:'pagingtoolbar',
				store:store,
				displayInfo:true
			}]
	});
	
	
	
/*	var itemsPerPage = 2;   // set the number of items you want per page

var store = Ext.create('Ext.data.Store', {
    id:'simpsonsStore',
    autoLoad: true,
    fields:['id', 'name', 'age'],
    pageSize: itemsPerPage, // items per page
    proxy: {
        type: 'ajax',
        url: '018_fenye.jsp',  // url that will load data with respect to start and limit params
        reader: {
            type: 'json',
            root: 'root',
            totalProperty: 'totalProperty'
        }
    }
});

// specify the page you want to load
store.loadPage(1);

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [
        {header: 'Name',  dataIndex: 'id'},
        {header: 'Email', dataIndex: 'name' },
        {header: 'Phone', dataIndex: 'age'}
    ],
    width: 400,
    height: 125,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
    renderTo: Ext.getBody()
});
	*/
});

jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	
	
	
	
	
	
	
	

  
  
  

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <%
    	String start=request.getParameter("start");
    	String limit=request.getParameter("limit");
    	System.out.println(start+limit);
    	try{
    		int index=Integer.parseInt(start);
    		int pageSize=Integer.parseInt(limit);
    		
    		String json="{totalProperty:100,root:[";
    		for(int i=index;i',name:'name"+i+"',age:'age"+i+"'}";
    			if(i!=pageSize+index-1){
    				json+=",";
    			}
    		}
    		json+="]}";
    		System.out.println(json);
    		response.getWriter().write(json);
    	}catch(Exception e){
    	  throw new Excepton("异常");
    	}
    
    %>