Ext前台分页（页面分页）

最新推荐文章于 2018-02-07 09:51:22 发布

simplehumn

最新推荐文章于 2018-02-07 09:51:22 发布

阅读量520

点赞数

分类专栏： EXT 文章标签： EXT JSP

EXT 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天上午测试并实现了Ext的前台分页，参考了网上的资料，使用了网上的一个js文件，最后提供该js文件的下载。
实现代码：


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},
		{header:'性别',dataIndex:'sex',sortable:true,renderer:function(value){
            if (value == 'male') {
				return "<span style='color:red;font-weight:bold;'>红男</span>";
            } else {
                return "<span style='color:green;font-weight:bold;'>绿女</span>";
            }
        }},
        {header:'名称',dataIndex:'name',sortable:true},
        {header:'描述',dataIndex:'descn',sortable:true}
    ]);

	var data = [
		['1','male','name1','descn1'],
		['2','female','name2','descn2'],
		['3','male','name3','descn3'],
		['4','female','name4','descn4'],
		['5','male','name5','descn5']
	];

	var ds = new Ext.data.Store({
		proxy: new Ext.ux.data.[color=red]PagingMemoryProxy[/color](data),//这个地方是扩展的Proxy
		reader: new Ext.data.ArrayReader({}, [
			{name: 'id',mapping:0},
			{name: 'sex',mapping:1},
			{name: 'name',mapping:2},
			{name: 'descn',mapping:3}
		])
	});

	var memoryGrid = new Ext.grid.GridPanel({
		ds: ds,
		cm: cm,
		sm: sm,
		renderTo:Ext.getBody(),
		bbar: new Ext.PagingToolbar({
			pageSize: 2,
			store: ds,
			displayInfo: true,
			displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
			emptyMsg: "没有记录"
		}),		
		width:464,
		height:155,
		title:'memoryGrid'
	});

    ds.load({params:{start:0,limit:2}});
});

jsp文件：


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Memory Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../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" src="memoryGrid.js"></script>
</head>
<body>
</body>
</html>