1.项目截图

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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_定义自己的页面组件的更多相关文章

  1. css页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  2. 054——VUE中vue-router之实例讲解定义一下单页面路由

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5/CSS3 第二章页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  4. new Vue() 和 export default {}及Vue页面组件和标签组件说明与比较(非常重要)

    说明与比较:new Vue() 和 export default {} (1)vue就是一个构造函数 (2)vue标签组件:是HTML标签的扩展https://www.cnblogs.com/w-wa ...

  5. 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验

    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔继续分析总结一下项目 ...

  6. 通用easyui查询页面组件

    easyui查询页面组件使用指南 本组件开发需求:信息系统的查询页面基本是包括:搜索区域,列表显示区域,按钮条. 1.录入一个查询语句(如:select * from Strudents),录入列表显 ...

  7. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  8. SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件

    SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件. Why? 下拉刷新这样的控件.想必大家用的太多了,比方使用非常多的XListView等. 近期.项目中非常多列表都 ...

  9. Vue框架——页面组件中使用小组件

    小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...

随机推荐

  1. 让浏览器支持 jquery ajax load 前进、后退 功能

    BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...

  2. Oracle安装过程物理内存检查及临时temp空间不足解决办法

    物理内存 – 此先决条件将测试系统物理内存总量是否至少为 922MB (944128.0KB). 预期值 : N/A 实际值 : N/A 错误列表: – 可用物理内存 PRVF-7531 : 无法在节 ...

  3. 【Linux&amp;Unix--open/close/write/read系统调用】

    个人学习整理.如有不足之处,请不吝不吝赐教. 转载请注明:@CSU-Max 系列博文:      Linux&Unix学习第一弹 -- 文件描写叙述符与权限  Linux&Unix学习 ...

  4. 【Web探索之旅】第二部分第二课：服务器语言

    内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...

  5. Java新手入门的30个基本概念

    Java已经成为一个庞大而复杂的技术平台,对于开发者而言,特别是刚開始学习的人,要想更好的掌握Java技术,深入理解基本概念不可缺少,能够帮助你提高对Java的进一步了解.以下为你介绍了Java语言的 ...

  6. OpenStack路: OpenStack建筑设计指南 - 概要(摘录和翻译)

    OpenStack它是在云技术领先的黄金工艺,作为一个组织,使各类企业,具有较大的灵活性和速度被发现,向市场推出自助服务云计算和基础架构即服务(IaaS)积.然,为了能够真正享受到这些好处,云计算必须 ...

  7. 移动开发中Fiddler的那些事儿 (转)

    当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便. 但是现在我要在手机上面调试页面,这个时候就没有这么方便的现成工具了. 后面发现了Fidd ...

  8. win7下go web之revel

    win7下go web之revel安装   接着上回记录的win7下go环境搭建,go的开发,现在除了sublime外,LiteIDE比较推荐,下载链接 下载安装后直接打开,需要配置下go环境(本机使 ...

  9. Spring.Net控制翻转、依赖注入、面向切面编程

    Spring.Net快速入门:控制翻转.依赖注入.面向切面编程 Spring.Net主要功能: 1.IoC:控制翻转(Inversion of Control)  理解成抽象工厂翻转控制:就是创建对象 ...

  10. Windows 2008 R2安装.NET Framework 4提示灾难性故障解决方法

    原因:WINDOWS 2008的安全设置方案取消了C盘根目录的Users权限,只给administrator和system权限,结果在打补丁时就无法更新(安装.net4需要安装windows6.1-K ...