Ext-js 4.2.1... Grid 分页调用action

Grid要实现分页，首先要向后台action传值，Ext 分页时主要向后台传值有3个：limit,page和start，

limit：每页显示记录条数；page:第几页（从1开始）；start：每页第一条记录的序号（从0开始，例如：第一页的第一条记录序号为0）。

首先定义一个Model类：

 Ext.onReady(function(){
			Ext.define('Student', {
				extend: 'Ext.data.Model',
				fields: [
					{name: 'id',type: 'int'},
					{name: 'username', type: 'string'},
					{name: 'age', type: 'string'}
				 ]
			});

 定义并实例化一个Store类，调用后台action取数据

var getLocalStore = Ext.create('Ext.data.ArrayStore', {
					model: 'Student',
					pageSize: 10,
					autoLoad: {start: 0, limit: 10},
					proxy : {  
		                type : 'ajax',  
		                url : 'list.action',//获取数据的url  
		                method : 'POST',  
		                reader : {  
		                    type : 'json',  
		                    root : 'datas',
		                    totalProperty : 'total'
		                }  
		            }
				});

 注意：reader : { 
                    type : 'json', 
                    root : 'datas',
                    totalProperty : 'total'
                } 

其中 type:'json'表示从后台取到的数据类型为json类型的；root:'datas'表示表单中具体要现实的记录（字符串表示的值要与action中List相对应）；totalProperty：'total'表示总的记录数。

然后就是创建Grid

var grid = Ext.create('Ext.grid.Panel', {
				store: getLocalStore,
				columns: [
					Ext.create('Ext.grid.RowNumberer'),
					{text: "ID", flex: 1, sortable: true, dataIndex: 'id'},
					{text: "Name", width: 200, sortable: true, dataIndex: 'username'},
					{text: "Age", width: 200, sortable: true, dataIndex: 'age'}
				],
				columnLines: true,
				width:600,
				height:300,
				selType: 'checkboxmodel',
				frame: true,
				title:'Grid with Numbered Rows',
				iconCls:'icon-grid',
				margin: '0 0 20 0',
				dockedItems: [{
			             xtype: 'pagingtoolbar',
			             store: getLocalStore,   
			             dock: 'bottom',
			             displayInfo: true
			     }],
				renderTo: Ext.getBody()
		   });

 Ext.create('Ext.grid.RowNumberer')显示行号。

注意：这里需要两次使用到getLocalStore，也就是上面的Store类。

分页部分dockedItems: [{
             xtype: 'pagingtoolbar',
             store: getLocalStore,  
             dock: 'bottom',
             displayInfo: true
     }],也要使用。