Extjs 分页问题

兰溪小城 2013-05-08 05:35:51

page.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

</head>

<body>

<%

String start = request.getParameter("start");

String limit = request.getParameter("limit");

try{

  int index=Integer.parseInt(start);

  int pageSize = Integer.parseInt(limit);

  String jjson ="{totalProperty:100,root:[";

  for(int i =index;i<pageSize+index;i++)

  {



  		jjson =jjson+"{id:"+i+",name:'name"+i+"',descn:'descn"+i+"'}";

  		if(i!=pageSize+index-1){

  		  jjson+=",";

  		}

  }

  jjson+="]}";

  response.getWriter().write(jjson);

  System.out.print(jjson);

}catch(Exception ex){

}



%>

</body>

</html>

page.html





<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

	href="../extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../extjs/ext-all.js"></script>

<script>

Ext.onReady(function()

{

	var sm = new Ext.grid.CheckboxSelectionModel(); //添加复选框

    var cm = new Ext.grid.ColumnModel([

        new Ext.grid.RowNumberer(), //添加行号

        sm,

       {header:'编号',dataIndex:'id'},

       {header:'名称',dataIndex:'name'},

       {header:'描述',dataIndex:'descn'}

    ]);

    

    var data=[['1','name1','descn1'],

              ['2','name2','descn2'],

              ['3','name3','descn3'],

              ['4','name4','descn4'],

              ['5','name5','descn5']];

    var ds = new Ext.data.Store({

    	//proxy:new Ext.data.ScriptTagProxy(data),

    	//proxy:new Ext.data.MemoryProxy(data),

    	proxy:new Ext.data.HttpProxy({url:'page.jsp'}),

    	reader:new Ext.data.JsonReader({

    		totalProperty:'totalProperty',

    		root:'root'

    	},[

    	   {name:'id'},

    	   {name:'name'},

    	   {name:'descn'}])

    });

   

    var grid = new Ext.grid.GridPanel({

    	renderTo:Ext.getBody(),

    	//stripeRows:true,

    	loadMask:true,

    	ds:ds,

    	cm:cm,

    	sm:sm,  //复选框

    	width:300,

    	bbar:new Ext.PagingToolbar({

    		pageSize:10,

    		ds:ds,

    		displayInfo:true,

    		displayMsg:'显示第{0}条到{1}条记录，一共{2}条',

    		emptyMsg:'没有记录'

    	}),

    	autoHeight:true

    });

    ds.load({params:{start:0,limit:10}});

    

    <!--删除第二行-->

    Ext.get('remove').on('click',function(){

    ds.remove(ds.getAt(1));

    grid.view.refresh();

    });

    

//     单击提示信息

    grid.on('click',function(){

    	var selections = grid.getSelectionModel().getSelections();

    	for(var i=0;i<selections.length;i++)

    	{

    		var record = selections[i];

    		Ext.Msg.alert('提示',record.get('id')+','+record.get('name')+','+record.get('descn'));

    	}

    });

});

</script>

</head>

<body>

<button id="remove">删除第二行</button>   

</body>

</html>