Ext前台分页

今天上午测试并实现了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({
		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({
                                                plugins: new Ext.ux.SlidingPager(), //分页中的一个插件
			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>
<!-- 分页插件js -->
  <script type="text/javascript" src="js/ux/SlidingPager.js"></script>
     <script type="text/javascript" src="js/ux/SliderTip.js"></script>
        <script type="text/javascript" src="js/ux/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="memoryGrid.js"></script>
</head>
<body>
</body>
</html>

你可能感兴趣的:(JavaScript,html,jsp,css,ext)