EXTJS4 gird表单分页

JS:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './ext-4.0/ux/');
Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.ux.ProgressBarPager'
]);

Ext.onReady(function(){
	
	Ext.define('T_MMS_MOBAN', {
        extend: 'Ext.data.Model',
        idProperty: 'mms_moban_id',
		fields:[
				{name:'mms_moban_id',type:'int',useNull : true},
				{name:'mms_moban_name',type:'string'},
				{name:'mms_moban_type',type:'string'},
				{name:'mms_moban_create_user',type:'string'},
				{name:'mms_moban_create_time',type: 'date', dateFormat: 'Y-m-d HH:mm:ss'}
			 ]
    });
    // create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'T_MMS_MOBAN',
        remoteSort: true,
        pageSize: 10,
        proxy: {
            type: 'ajax',
            url: './mmsTelate.action',  //请求的服务器地址
		 	reader: {
                type: 'json',
		        root:'root',
		        totalProperty:'totalProperty'
            }
        }
        
    });
    var toolbar =[{text :'删除',iconcls:'add',handler:deleteUser},{text :'修改',iconcls:'add',handler:updateUser},{}];
    //创建多选框
	var checkBox = Ext.create('Ext.selection.CheckboxModel'); 
	var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',{clicksToEdit:2});//表示“双击”才可以修改内容（取值只能为“1”或“2”）
    
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
    	//title:'Progress Bar Pager',
    	tbar:toolbar,
        store: store,
        selModel:checkBox,
		//表示可以选择行
		disableSelection: false,
		columnLines: true, 
		loadMask: true, 
		//添加修改功能
		plugins: [cellEditing] ,
        columns: [
        			{text : '编号',sortable: true,dataIndex: 'mms_moban_id',width: 100},
					{text : '名称',sortable: true,dataIndex: 'mms_moban_name',width: 100},
        			{text : '类型',sortable: true,dataIndex: 'mms_moban_type',width: 100},
        			{text : '创建人',sortable: true,dataIndex: 'mms_moban_create_user',width: 100},
        			{text: '创建时间',sortable: true,dataIndex: 'mms_moban_create_time',width: 100},
        			{text:'操作',width: 100,
        				  items:[{text:'预览',
        				  		 // xtype:'panel',
        				  		 // id:'index',
        				  		  iconCls:'homemanage', 
        				  		  title:'预览'
                                 // html:'<iframe src='http://www.'scrolling='yes' frameborder=0 width=100% height=100%></iframe>'
							   }]
					}

        			
        	],
        stripeRows: true,
        height:600,
        width:600,
        frame:true,

        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 10,
            store: store,
            displayInfo: true,
            //xtype :'pagingtoolbar',
   			plugins: Ext.create('Ext.ux.ProgressBarPager', {})
        })
    });

    grid.render('grid-example');

    store.load();
    
    function updateUser(){
    }
    
    function deleteUser(){
				//得到选中的行
				var data = grid.getSelectionModel().getSelection();
				if(data.length == 0) {
					Ext.MessageBox.show(
							'提示',
							'请选择您要操作的行！'
					);
				}else{
					Ext.Msg.confirm(
							'请确认',
							'是否真的要删除数据',
							function(button,text){
								if(button == "yes"){
									//用于存放所要删除的数据
									var ids = [];
									//遍历并放入ids中
									Ext.Array.each(
											data,
											function(record){
												ids.push(record.data);
											}
									);
									alert(ids.length);
									Ext.Ajax.request(
											
											{
												url:'./deleteMmsID.action',
												params:{
													//在后台接收deleteUsers为要删除的对象
													deleteMmss:Ext.encode(ids)
												},
												method:'POST',
												
												success:function (response){
													var success = Ext.decode(response.responseText).success;
													if(success){
														Ext.Array.each(data,function(record){
																//删除store中的数据，页面效果
																store.remove(record);
															}
																
														)
													}else{
														Ext.MessageBox.show(
																'提示',
																'删除失败'
														)
													}
												}
											}
									)
								}
							}
					);
					
					
				}
			}

});

action：

List<T_MMS_MOBAN> list = selectMmsSerivce.PageCountMoban("MMS.select_page_list",currentPage,pageSize);

JSONArray jsonArray = JSONArray.fromObject(list);

String json = jsonArray.toString();

String supJson = "{totalProperty:"+totalRecord+",root:"+json+"}";

        HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

response.getWriter().print(supJson);

struts.xml:

<include file="struts-default.xml"/>

<package name="josn" extends="json-default">

<action name="mmsTelate" class="com.javawork.business.mms.send.action.MmsTemplateAction" method="MmsTelate">

<result type="json">./mms/tpage.jsp</result>

</action>

</package>

JSP:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">

<html>

<head>

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

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

    <link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />

  <script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>

  <script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script>

    <script type="text/javascript" src="./extjs/pagelist.js"></script>

</head>

<body>

   <div id="grid-example"></div>

</body>

</html>