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);

}

 

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

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

评论

4 楼 温柔企鹅 2011-11-07  

我拷了一下代码，我的程序里面，都不会显示出来的，不过，我可以从后台传数据！我感觉你可能没有配置struts.xml文件里面的json

3 楼 ningwuyu 2011-09-06  

Ext.onReady(function(){
     Ext.MessageBox.alert('aaaaa');

})

2 楼 ningwuyu 2011-09-06  

aaaaaaaaaaaaaaaaa

1 楼 qishi001 2010-08-12  

<pre name="code" class="java">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;查询功能的GridPanel&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /&gt;
&lt;script type="text/javascript" src="../../adapter/ext/ext-base.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../ext-all.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
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 : '页&amp;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
});
}
}
})
});
});
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="container"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>    </p>
<p>   希望对你有帮助。</p>