码迷,mamicode.com
首页 > Web开发 > 详细

extjs_09_自定义分页组件

时间:2014-07-08 14:50:28      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:extjs_09_自定义分页组件


1.项目截图

bubuko.com,布布扣

bubuko.com,布布扣

2.CustomSizePagingToolbar.js

Ext.define("Ext.ux.CustomSizePagingToolbar", {// 定义的名字要和文件的名字大小写一样
	extend : "Ext.toolbar.Paging",
	alias : "widget.custompaging",// 别名
	beforSizeText : "每页",
	afterSizeText : "条",
	getCustomItems : function() {
		var me = this;
		// 自定义customComStore
		var customComStore = Ext.create("Ext.data.JsonStore", {
			fields : [ "customPageSize" ],
			data : [ {
				customPageSize : "10"
			}, {
				customPageSize : "20"
			}, {
				customPageSize : "50"
			}, {
				customPageSize : "100"
			} ]
		})
		// 自定义customComboBox
		var customComboBox = Ext.create("Ext.form.field.ComboBox", {
			itemId : "customComboId",
			store : customComStore,
			queryMode : "local",
			displayField : "customPageSize",
			valueField : "customPageSize",
			enableKeyEvents : true,// 感应键盘事件
			width : 60,
			listeners : {
				scope : me,// 作用域
				select : me.onCustomSelect,
				keydown : me.onCustomKeyDown,
				blur : me.onCustomBlur
			}
		});
		// - 表示分割线,> 表示右边显示
		return [ "-", me.beforSizeText, customComboBox, me.afterSizeText ];
	},
	onCustomSelect : function(combo, records, eOpts) {// 选择事件触发
		var me = this;
		me.store.pageSize = records[0].data.customPageSize;
		me.store.loadPage(1);// 默认加载第一页
	},
	onCustomKeyDown : function(field, e, eOpts) {// 按键事件触发
		var me = this;
		var k = e.getKey();
		if (k == e.ENTER) {
			e.stopEvent();// 停止其他事件
			me.store.pageSize = me.child("#customComboId").getValue();
			me.store.loadPage(1);
		}
	},
	onCustomBlur : function(combo, the, eOpts) {// 失去焦点事件
		var me = this;
		me.child("#customComboId").setValue(me.store.pageSize);
	},
	// 初始化界面组件
	initComponent : function() {
		var me = this;
		Ext.apply(me, {// 应用、附加
			items : me.getCustomItems()
		});
		me.callParent(arguments);
		me.child("#customComboId").setValue(me.store.pageSize);// 初始化赋值
	}
})

3.custompaging.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>自定义分页组建</title>

<!-- 引入样式,可以把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<!-- 开发模式引入ext-all-debug.js,发布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
<!-- 引入自定义分页 -->
<script type="text/javascript" src="./extjs4.1/ux/CustomSizePagingToolbar.js"></script>

<script type="text/javascript">
	Ext.onReady(function() {
		Ext.QuickTips.init();//快速提示初始化
		Ext.Loader.setConfig({
			paths : {
				"Ext.ux" : "extjs4.1/ux"//文件加载路径(Ext.ux=extjs4.1/ux)
			}
		});

		// 自定义数据模型
		var jsonpModel = Ext.define("jsonpModel", {
			extend : "Ext.data.Model",
			fields : [ {
				name : "userid",
				type : "string"
			}, {
				name : "username",
				type : "string"
			}, {
				name : "dateline",
				type : "string"
			}, {
				name : "title",
				type : "string"
			} ]
		});
		// 数据
		var myStore = Ext.create("Ext.data.Store", {
			model : "jsonpModel",
			pageSize : 10,//配置每页显示记录数
			proxy : {
				type : "jsonp",
				url : "http://www.sencha.com/forum/topics-browse-remote.php",
				reader : {
					totalProperty : "totalCount",
					root : "topics"
				}
			},
			// 自动加载数据
			autoLoad : true
		});

		// 表格
		var myGrid = new Ext.grid.Panel({
			columns : [ {
				xtype : "rownumberer",
				text : "行号",
				width : 30
			}, {
				text : "用户id",
				dataIndex : "userid"
			}, {
				text : "用户姓名",
				dataIndex : "username"
			}, {
				text : "时间线",
				dataIndex : "dateline"
			}, {
				text : "标题",
				dataIndex : "title"
			} ],
			store : myStore,
			bbar : Ext.create("Ext.ux.CustomSizePagingToolbar", {// 在表格底部 配置分页
				displayInfo : true,
				store : myStore
			})
		});

		// 窗口
		var window = Ext.create("Ext.window.Window", {
			title : "学生成绩表",
			width : 600,
			height : 400,
			items : myGrid,
			layout : "fit"
		});
		window.show();
	});
</script>

</head>

<body>
	<br> 自定义分页组件
</body>
</html>


extjs_09_自定义分页组件,布布扣,bubuko.com

extjs_09_自定义分页组件

标签:extjs_09_自定义分页组件

原文地址:http://blog.csdn.net/adam_wzs/article/details/37543513

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!