GridPanel 分页

在表格的工具栏上面有一个查询按钮，我是通过点击查询按钮的时候，发送Ajax请求，从后台获得数据

   显示在表格里面，现在是对表格数据进行分页，分页不了，表格里面的数据没有更新。只有分页栏工具可以进行上下翻页，但是表格里面的数据没有同步

       
                //一开始数据源里面是没有数据的
		var proStore = new Ext.data.JsonStore({
					

					});

			var checkColumn = new Ext.grid.CheckboxSelectionModel(); // 定义复选框
			var rowNum = new Ext.grid.RowNumberer();
			var projectColumn = new Ext.grid.ColumnModel([rowNum, checkColumn,
					{
						header : "销售单号",
						width : 160,
						dataIndex : "saleNo",
						id : "saleNo",
						sortable : true
					}, {
						header : "会员",
						width : 160,
						dataIndex : "saleVIP",
						id : "saleVIP"
					}, {
						header : "下单时间",
						width : 100,
						dataIndex : "orderTime",
						id : "orderTime",
						sortable : true,
						renderer : function(value) {
							if (value == null || value == 0) {
								return 'null'
							} else {
								// 时间转好,将时间戳转换成Ext显示的日期格式
								return Ext.util.Format.date(
										new Date(parseInt(value)), 'Y-m-d')
							}
						}
					}, {
						header : "客服",
						width : 100,
						dataIndex : "salePerson",
						id : "salePerson"
					}, {
						header : "数量",
						width : 80,
						dataIndex : "saleNumber",
						id : "saleNumber",
						sortable : true
					}, {
						header : "金额",
						width : 80,
						dataIndex : "salePrice",
						id : "salePrice",
						sortable : true
					}, {
						header : "回访记录",
						width : 100,
						dataIndex : "returnRecord",
						id : "returnRecord",
						sortable : true
					}, {
						header : "状态",
						width : 80,
						dataIndex : "status",
						id : "status",
						sortable : true
					}, {
						header : "快递号",
						width : 100,
						dataIndex : "expressID",
						id : "expressID",
						sortable : true
					}]);

			var tbar2 = new Ext.Toolbar({
						renderTo : Ext.grid.GridPanel.tbar,
						items : [{
							text : "打印销售单",
							iconCls : 'print',
							handler : function() {
								Ext.MessageBox.prompt("打印快递单", "请输入起始快递单号:",
										function(btn, text) {
										})
							}
						}, {
							xtype : "tbseparator"
						}, {
							text : '打印快递单',
							iconCls : 'print'
						}]
					});

			var contentGrid = new Ext.grid.GridPanel({
						renderTo : "saleQuery",
						id : "saleQueryGird",
						title : "销售查询",
						autoWidth : true,
						autoHeight : true,
						cm : projectColumn,
						sm : checkColumn, // 添加复选框
						store : proStore,
						autoScroll : true, // 内容溢出时产生滚动条

						tbar : [{
									xtype : "combo",
									store : saleStatusStore,
									id : "saleStatus",
									name : "saleFettle",
									hiddenName : "saleFettle",
									displayField : "fettlename",
									valueField : "fettleid",
									mode : "local",
									triggerAction : "all",
									emptyText : "请选择销售单状态"

								}, '&nbsp', '&nbsp', {
									xtype : "textfield",
									id : "saleCode",
									emptyText : "填写销售单"

								}, '&nbsp', '&nbsp', {
									xtype : "label",
									text : "选择时间:"
								}, '&nbsp', {
									xtype : "datefield",
									id : "chooseStartTime",
									name : "chooseStartTime",
									vtype : "daterange",
									endDateField : "chooseEndTime"

								}, '&nbsp', {
									xtype : "label",
									text : "至"
								}, '&nbsp', {

									vtype : "daterange",
									xtype : "datefield",
									id : "chooseEndTime",
									name : "chooseEndTime",
									startDateField : "chooseStartTime",
									value : new Date()

								}, '&nbsp', {
									xtype : "label",
									text : "快递公司:"
								}, '&nbsp', {
									xtype : "combo",
									store : ["圆通", "申通"],
									emptyText : "请选择快递公司"
								},'&nbsp', {
									text : "查詢",   //通过点击查询，才查询数据显示到表格，
									iconCls : "addBtn",
									handler : saleSelect
								}],
						listeners : {
							'render' : function() {
								tbar2.render(this.tbar);
							}
						},
						bbar : new Ext.PagingToolbar({
									id : "pagingToolbar",
									pageSize : 5,
									store : proStore,
									displayInfo : true,
									displayMsg : '显示第 {0} 条到 {1} 条记录，总共 {2} 条',
									emptyMsg : "没有记录"

								})

					});
			contentGrid.render();
		});

//查询方法
function saleSelect() {
	var saleStatus = Ext.getCmp("saleStatus").getValue();
	var saleCode = Ext.getCmp("saleCode").getValue();
	var startDate = Ext.getCmp("chooseStartTime").getValue();
	var endDate = Ext.getCmp("chooseEndTime").getValue();

	if (startDate == null || startDate == "") {
		Ext.MessageBox.alert("提示", "日期不能为空")
		return;
	}

	Ext.Ajax.request({
				url : "query_querySaleData.action",
				params : {
					saleStatus : saleStatus,
					saleCode : saleCode,
					startDate : startDate,
					endDate : endDate
				},
				success : function(response, action) {
					// alert(response.responseText);

					var data = Ext.util.JSON.decode(response.responseText);
					if (data == null || data == "") {
						Ext.MessageBox.alert("提示", "没有找到记录！");
					} else {
						updateGrid(data); // 更新表格数据
					}
				},
				failure : function(response, action) {
					Ext.MessageBox.alert("提示", "连接服务器失败！")
				}
			});

}

function updateGrid(data) {

	alert(Ext.util.JSON.encode(data));
	var proCreate = new Ext.data.Record.create([{
				name : "saleNo",
				mapping : "saleCodeNo",
				type : "string"
			}, {
				name : "saleVIP",
				mapping : "saleVipNo",
				type : "string"
			}, {
				name : "orderTime",
				mapping : "saleTime",
				type : "string"
			}, {
				name : "salePerson",
				mapping : "saleName",
				type : "string"
			}, {
				name : "saleNumber",
				mapping : "saleNum",
				type : "string"
			}, {
				name : "salePrice",
				mapping : "salePrice"
			}]);

	var jsonStore = new Ext.data.Store({
				// data : data,
				proxy : new Ext.data.PagingMemoryProxy(data),
				reader : new Ext.data.JsonReader({
							totalProperty : "totalProperty", // 总记录数
							root : "root" // 所有的数据（json对象数组）
						}, proCreate)
			});

	jsonStore.load({
				params : {
					start : 0,
					limit : 5    //这里也没有将值传到后台，那要怎么传？
				},
				callback : function(record, options, success) {
					if (success == false) {
						Ext.Msg.buttonText.ok = "确定";
						Ext.Msg.alert("错误", "服务器查询失败，请再次尝试！");
					} else {
						Ext.MessageBox.alert("提示", "success")

					}
				}
			});

	alert("totalCount = " + jsonStore.getTotalCount());

	alert("count = " + jsonStore.getCount());

	var saleQueryGrid = Ext.getCmp("saleQueryGird");
	saleQueryGrid.getStore().removeAll();
	saleQueryGrid.getStore().add(jsonStore.getRange()); // 表格重新绑定数据源

	// 分页工具重新绑定数据源
	Ext.getCmp("pagingToolbar").bind(jsonStore);

}

 

请大家大家帮帮忙看看，到底哪里不对，该怎么实现这个分页？ 很困扰，谢谢了。。

我是通过点击事件之后才发生请求去读取数据的。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查询功能的GridPanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();
		var store = new Ext.data.Store({
			url:'',
			reader: new Ext.data.JsonReader({ 
				totalProperty:'total', 
				root:'results' 
			}, 
			[
			   'id','name','sex','age'
			]
			), 
			remoteSort : true,
			baseParams : {}
		});
		
		var ColMod = new Ext.grid.ColumnModel([
			{
				header: "编号", 
				sortable: true, 
				align :'center',
				dataIndex: 'id'
			},{
				header: "姓名", 
				sortable: true, 
				align :'center',
				dataIndex: 'name'
			},{
				header: "性别", 
				sortable: true, 
				align :'center',
				dataIndex: 'sex'
			},{
				header: "年龄", 
				sortable: true, 
				align :'center',
				dataIndex: 'age'
			}
		]);
		
		/**将查询条件封装到封到Ext.Toolbar**/
		
		var TopSerachBar = new Ext.Toolbar({
			id : 'TopSerachBar',
			border : false,
			frame: false,
			anchor : '100%',
			style: {
				border : 'none'
			},
			items : ['编号:',{
				xtype: 'textfield',
				id : 'ID',
				name : 'ID'
			},'-','姓名:',{
				xtype: 'textfield',
				id : 'NAME',
				name : 'NAME'
			},'-','年龄:',{
				xtype: 'textfield',
				id : 'AGE',
				name : 'AGE'
			},'-',{
				text : '查  询',
				handler : function (btn,e){
					var params = SearchPanel.getForm().getValues();
					params['start'] = 0;
					params['limit'] = 30;
					store.load({params:params});
				}
			}]
		});
		
		/**将Toolbar封装到Ext.form.FormPanel**/
		
		var SearchPanel = new Ext.form.FormPanel({
			defaultType: 'textfield',
			id : 'SearchPanel',
			name : 'SearchPanel',
			border : false,
			frame : false,
			items :[TopSerachBar]
		});
		
		var grid = new Ext.grid.GridPanel({
			frame: false,
			id : 'grid',
			ds: store,
			trackMouseOver : true,
			loadMask:({msg :'数据正在加载中……'}), 
			height:320,
			title:'', 
			cm: ColMod,
			sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
			tbar : [SearchPanel],
			viewConfig: {
				forceFit: true
			},
			renderTo :'container',
			bbar: new Ext.PagingToolbar({
				pageSize : 30, 
				store : store, 
				displayInfo : true, 
				beforePageText : '第', 
				afterPageText : '页&nbsp;共 {0} 页', 
				refreshText : '刷新', 
				displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条记录', 
				emptyMsg : '没有记录',
				doLoad: function(v){
					/**点击分页时会把查询参数传递过去**/
					var params = SearchPanel.getForm().getValues();
					//alert(params.ID);
					params['start'] = v;
					params['limit'] = this.pageSize;
					
					if (this.fireEvent("beforechange", this, params) !== false) {
						this.store.load({
							params: params
						});
					}
				}
			})
		});
	});
</script>
</head>

<body>
<div id="container"></div>
</body>
</html>

   

   希望对你有帮助。