extjs_09_定义自己的页面组件
1.项目截图
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>
版权声明：本文博客原创文章，博客，未经同意，不得转载。
