extjs_09_定义自己的页面组件

以你之姓@ 2022-04-10 10:06 175阅读 0赞

# 1.项目截图    #

![SouthEast][]

![20140707231503593][]

# 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>
    
    
    <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
    
    <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>

[SouthEast]: /images/20220331/6b642356d6434cbbba1e0a96fb1f34ab.png
[20140707231503593]: /images/20220331/da8e42d7fcbd4ed6bddda97315949579.png?