Ext前台分页

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

iteye_2556

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

阅读量86

点赞数

分类专栏：前端技术文章标签： EXT JavaScript CSS JSP HTML ViewUI

前端技术专栏收录该内容

18 篇文章 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({

		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>

iteye_2556

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext前台分页

今天上午测试并实现了Ext的前台分页，参考了网上的资料，使用了网上的一个js文件，最后提供该js文件的下载。实现代码：Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumbere...
复制链接

扫一扫

专栏目录