extjs 一次加载数据前台分页问题

0 0

extjs 一次加载数据前台分页问题0

后台拿到的json

[['0','张三','0','15246532154'],['1','李四','0','15246532154'],['2','王五','0','15242342154'],['3','李磊','0','15245678987'],['4','卡卡','0','12321313321'],['5','阿斯达','1','12131312322'],['6','斯巴达','1','11231231231'],['7','李欧','1','23343434343']]

前台ext代码：

/**
 * 前台分页
 */
Ext.onReady(function() {
	
	var sm = new Ext.grid.CheckboxSelectionModel();

	var cm = new Ext.grid.ColumnModel([
			// 序号
			new Ext.grid.RowNumberer(), sm, {
				header : '编号',
				dataIndex : 'id',
				sortable : true,
				type : 'int'
			}, {
				header : '姓名',
				dataIndex : 'name'
			}, {
				header : '性别'

			}, {
				header : '电话',
				dataIndex : 'phone'
			}]);
	var reader = new Ext.data.ArrayReader({}, [{
						name : 'id'
					}, {
						name : 'name'
					}, {
						name : 'sex'
					}, {
						name : 'phone'
					}]);

	var store = new Ext.data.Store({
				reader : reader
			});
	// 读取后台传递于前台数据
	Ext.Ajax.request({
				url : '../test/user2.show',
				method : 'get',
				success : function(response, opts) {
					var obj = Ext.decode(response.responseText);// obj储存响应的数据
					store.proxy = new Ext.data.PagingMemoryProxy(obj) // PagingMemoryProxy()
					// 一次性读取数据
				},
				failure : function() {
					Ext.Msg.alert("读取数据失败");
				}
			});
	// 分页条
	var pagebar = new Ext.PagingToolbar({
				pageSize : 5,// 每页显示条数
				store : store,
				beforePageText : "当前第",
				afterPageText : "页，共{0}页",
				lastText : "尾页",
				nextText : "下一页",
				prevText : "上一页",
				firstText : "首页",
				refreshText : "刷新页面",
				displayInfo : true,
				displayMsg : "当前显示 {0} - {1}条, 共 {2}条",
				emptyMsg : "没有记录"
			});

	var grid = new Ext.grid.GridPanel({
		renderTo : 'grid',
		autoHeight : true,
		store : store,
		mode : "remote",
		cm : cm,
		sm : sm,
		loadMask : {
			msg : '正在加载数据，请稍侯……'
		},
		tbar : pagebar
			
		});
	store.load({
				params : {
					start : 0,
					limit : 5
				}
			});// 按5条记录分布
		
	});

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前台分页</title>
	<link rel="stylesheet" type="text/css" href="../js/ext-3.3.1/resources/css/ext-all.css" />
	<script type="text/javascript" src="../js/ext-3.3.1/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-3.3.1/ext-all.js"></script> 
	<script type="text/javascript" src="../js/ext-3.3.1/ext-lang-zh_CN.js"></script> 
	<script type="text/javascript" src="js/PagingMemoryProxy.js"></script> 
	<script type="text/javascript" src="js/diygrid2.js"></script> 
</head>
<body>
<div id="grid" style="height:265px;"></div>
</body>
</html>

页面始终处于加载中，分页数据不显示。求指导。

问题补充：直接将数据写到前台就没问题
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</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" src="PagingMemoryProxy.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel(

);
    var cm = new Ext.grid.ColumnModel([
// 序号
new Ext.grid.RowNumberer(), sm, {
header : '编号',// 列显示的名称
dataIndex : 'id',
sortable : true,// 可排序的
type : 'int'
}, {
header : '姓名',
dataIndex : 'name'
}, {
header : '性别',
dataIndex : 'sex',
renderer : function(value) {
if (value == '0') {
return "<font color='red'>男</span>";
}

else {
return "<font color='red'>女</span>";
}

}
}, {
header : '电话',
dataIndex : 'phone'
}]);

    var data =[
['0','张三','0','15246532154'],
['1','李四','0','15246532154'],
['2','王五','0','15242342154'],
['3','李磊','0','15245678987'],
['4','卡卡','0','12321313321'],
['5','阿斯达','1','12131312322'],
['6','斯巴达','1','11231231231'],
['7','李欧','1','23343434343']
]

    var store = new Ext.data.Store({
        proxy: new Ext.data.PagingMemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
{
                        name : 'id'
                    }, {
                        name : 'name'
                    }, {
                        name : 'sex'
                    }, {
                        name : 'phone'
                    }
        ])
    });

    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        autoHeight: true,
        store: store,
        cm: cm,
        bbar: new Ext.PagingToolbar({
            pageSize: 3,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    store.load({params:{start:0,limit:3}});

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
    </body>
</html>