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. 集合中Set_List必须覆盖 hashCode()与 equals()

    集合中Set_List必须覆盖 hashCode()与 equals() @Override public int hashCode() { System.out.println("==== ...

  2. Windows Phone开发(45):推送通知大结局——Raw通知

    原文:Windows Phone开发(45):推送通知大结局--Raw通知 为什么叫大结局呢?因为推送通知服务就只有三种,前面扯了两种,就剩下一种--Raw通知. 前面我们通过两节的动手实验,相信大家 ...

  3. 关于bind函数和connect函数的测试结论

    1. 一般客户端不用绑定,系统给你自动分配(有些ip不是固定的,bind也不是一个好方法):而服务器需要绑定,因为需要给客户端一个众所周知的固定的地址: 2. 关于bind错误,可以用WSAGetLa ...

  4. 设计模式10---设计模式之原型模式(Prototype)

    1.场景模式 考虑这样一个实际应用:订单处理系统 里面有一个保存订单的功能,当产品数量超过1000份以后,拆成两份订单,再超,那么就再拆.直到每份订单不超过1000为止,订单有两种,一个是个人订单,一 ...

  5. 基础知识(2)- Java程序设计环境

    2.1 安装Java开发工具箱  2.1.1 下载JDK  2.1.2 设置执行路径  2.1.3 安装库源文件和文档  2.1.4 安装本书中的示例  2.1.5 导航Java目录 2.2 选择开发 ...

  6. 令人无限遐想的各种PCIe加速板卡

    声明 本文不涉及不论什么特定API,也不针对不论什么特定的厂商,可是仍然值得透露一点的是,某些加速板卡厂商的成功点和失败点恰恰都是在于其通用性,在这个人们依旧依赖专业板卡的时代,依旧将板卡视为解决专业 ...

  7. Java二叉排序树(转)

    一.二叉排序树定义 1.二叉排序树的定义 二叉排序树(Binary Sort Tree)又称二叉查找(搜索)树(Binary Search Tree).其定义为:二叉排序树或者是空树,或者是满足如下性 ...

  8. 设计模式——工厂模式(Factory)

    要想正确理解设计模式,首先必须明白它是为了解决什么问题而提出来的. 设计模式学习笔记 --Shulin 转载请注明出处:http://blog.csdn.net/zhshulin 1.概念 工厂模式定 ...

  9. CentOS7下一个mysql安装

    CentOS7安装MySQL --下载mysql http://mirrors.sohu.com/mysql/MySQL-5.6/ http://mirrors.sohu.com/mysql/MySQ ...

  10. java反射机制性能优化

    import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; import java.uti ...