75.培训管理-培训信息发布 Extjs 页面
1.
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>培训信息</title>
<script type="text/javascript">
var trainPanel = new TrainPanel();
var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
juage(tabId,"train",trainPanel,"train");
</script> </head>
<body>
<div id="train" ></div>
</body>
</html>
2.train.js 页面布局面板
TrainPanel = Ext.extend(Ext.Panel,{
id: 'trainPanelId',
constructor: function(){
trainQueryPanel = new TrainQueryPanel();
trainInfoGridPanel = new TrainInfoGridPanel();
TrainPanel.superclass.constructor.call(this,{
style: 'margin:0 auto',
border: false,
//layout: 'fit',
//autoWidth: true,
//autorHeight: true,
//定义两个面板
items: [trainQueryPanel, trainInfoGridPanel]
})
}
})
3.trainInfo.js 编辑表格面板和查询面板
/**
* 培训信息表格
* @author sux 2011-02-20
* @memberOf {TypeName}
*/
TrainInfoGridPanel = Ext.extend(Ext.grid.GridPanel,{
id: 'trainInfoGridId',
constructor: function(){
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var number = new Ext.grid.RowNumberer(); var cm = new Ext.grid.ColumnModel([
number, sm,
{
header: '编号',
dataIndex: 'trainId',
align: 'center'
},{
header: '培训人',
dataIndex: 'trainPerson',
align: 'center'
},{
header: '培训时间',
dataIndex: 'trainDate',
align: 'center'
},{
header: '培训主题',
dataIndex: 'trainTitle',
align: 'center'
},{
header: '培训地点',
dataIndex: 'trainPlace',
align: 'center'
}]); var trainStore = new Ext.data.JsonStore({
url: 'train_list.action',
root: 'root',
totalProperty: 'totalProperty',
fields: ['trainId','trainPerson','trainDate','trainTitle','trainPlace']
}); TrainInfoGridPanel.superclass.constructor.call(this, {
width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
/**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
monitorResize: true,
doLayout: function() {
this.setWidth(document.body.clientWidth-205);
this.setHeight(document.body.clientHeight-250);
Ext.grid.GridPanel.prototype.doLayout.call(this);
} ,
viewConfig: {
forceFit: true,
autoFill: true,
columnsText : "显示/隐藏列",
sortAscText : "正序排列",
sortDescText : "倒序排列"
},
border: false,
height: 500,
frame: true,
cm: cm,
sm: sm,
store: trainStore,
tbar: new Ext.Toolbar({
items: [{
text: '显示全部',
iconCls: 'all',
handler: function(){
trainStore.load();
}
},{
text: '删除',
iconCls: 'delete',
id: 'train_delete',
handler: delTrainFn
},{
text: '添加',
iconCls: 'add',
id: 'train_add',
handler: addTrainFn
},{
text: '修改',
iconCls: 'update',
id: 'train_update',
handler: editTrainFn
},{
text: '详情',
iconCls: 'detail',
id: 'train_detail',
handler: detailTrainFn
}]
}),
bbar: new PagingToolbar(trainStore,20)
});
trainStore.load({
params: {
start: 0,
limit: 20
}
});
}
});
//删除
delTrainFn = function(){
gridDel('trainInfoGridId','trainId','train_delete.action');
};
//添加
addTrainFn = function(){
var trainAddWin = new TrainAddWin();
trainAddWin.show();
};
//详情
detailTrainFn = function(){
var trainDetailWin = new TrainDetailWin();
trainDetailWin.title = '招聘信息';
var selectionModel = Ext.getCmp('trainInfoGridId').getSelectionModel();
var record = selectionModel.getSelections();
if(record.length != 1){
Ext.Msg.alert('提示','请选择一个');
return;
}
var trainId = record[0].get('trainId');
Ext.getCmp('trainDetailPanelId').getForm().load({
url: 'train_intoUpdate.action',
params: {
trainId: trainId
}
})
trainDetailWin.show();
};
//修改
editTrainFn = function(){
var trainAddWin = new TrainAddWin();
trainAddWin.title = '招聘信息修改';
var selectionModel = Ext.getCmp('trainInfoGridId').getSelectionModel();
var record = selectionModel.getSelections();
if(record.length != 1){
Ext.Msg.alert('提示','请选择一个');
return;
}
var trainId = record[0].get('trainId');
Ext.getCmp('trainAddPanelId').getForm().load({
url: 'train_intoUpdate.action',
params: {
trainId: trainId
}
})
trainAddWin.show();
}; /**
* 按条件查询面板
* @author sux 2011-02-20
* @memberOf {TypeName}
*/
var TrainQueryPanel = Ext.extend(Ext.Panel,{
id: 'trainQueryId',
constructor: function(){
TrainQueryPanel.superclass.constructor.call(this,{
collapsible: true,
titleCollapse: true, //单击整个collapse都有效
//collapsed: true, //渲染后即闭合
title: '条件查询',
border: false,
frame: true,
autoWidth: true,
defaultType: 'fieldset',
items: [{
title: '条件',
layout: 'table',
layoutConfig: {
columns: 6
},
defaults: {
labelWidth: 60,
labelAlign: 'right'
},
items: [{
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '培训人',
width: 100,
id: 'train_person'
}]
},{
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '培训主题',
width: 100,
id: 'train_title'
}]
},{
layout: 'form',
items: [{
xtype: 'datefield',
fieldLabel: '开始时间',
format: 'Y-m-d',
width: 100,
id: 'start_date'
}]
},{
layout: 'form',
items: [{
xtype: 'datefield',
fieldLabel: '结束时间',
format: 'Y-m-d',
width: 100,
id: 'end_date'
}]
},{
style: 'margin: 0px 10px 0px 20px;',
xtype: 'button',
text: '查询',
iconCls: 'search',
handler: queryTrainFn
},{
xtype: 'button',
text: '取消',
iconCls:'cancel',
handler: cancelTrainFn
}]
}]
})
}
});
//查询
queryTrainFn = function(){
var trainPerson = Ext.get("train_person").dom.value;
var trainTitle = Ext.get("train_title").dom.value;
var startDate = Ext.get("start_date").dom.value;
var endDate = Ext.get("end_date").dom.value;
Ext.getCmp('trainInfoGridId').getStore().load({
params: {
type: 'query',
startDate: startDate,
endDate: endDate,
trainTitle: trainTitle,
trainPerson: trainPerson,
start: 0,
limit: 20
}
})
};
//取消
cancelTrainFn = function(){
Ext.get("train_person").dom.value = "";
Ext.get("train_title").dom.value = "";
Ext.get("start_date").dom.value = "";
Ext.get("end_date").dom.value = "";
};
4. 添加窗口
//新一个培训信息发布窗口
TrainAddWin = Ext.extend(Ext.Window,{
id: 'trainAddWinId',
constructor: function(){
var trainAddPanel = new TrainAddPanel();
TrainAddWin.superclass.constructor.call(this, {
width: 460,
height: 350,
resizable: false, //不能改变窗体大小
title: '培训信息录入',
collapsible: true,
modal: true,
items: [trainAddPanel]
})
}
}) //培训信息发布面板
TrainAddPanel = Ext.extend(Ext.form.FormPanel,{
id: 'trainAddPanelId',
constructor: function(){
Ext.form.Field.prototype.msgTarget = 'side';
Ext.QuickTips.init();
var reader = new Ext.data.JsonReader({},[{
name: 'train.trainTitle', mapping: 'trainTitle'
},{
name: 'train.trainDate', mapping: 'trainDate'
},{
name: 'train.trainPerson', mapping: 'trainPerson'
},{
name: 'train.trainRemark', mapping: 'trainRemark'
},{
name: 'train.trainContent', mapping: 'trainContent'
},{
name: 'train.trainPlace', mapping: 'trainPlace'
},{
name: 'train.trainId', mapping: 'trainId'
}]);
TrainAddPanel.superclass.constructor.call(this,{
width: 450,
border: false,
height: 320,
frame: true,
layout: 'table',
reader: reader,
layoutConfig: {
columns: 2
},
defaults: {
labelWidth: 60,
labelAlign: 'right'
},
items:[{
width: 200,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '标题',
allowBlank: false,
emptyText: '不能为空',
blankText: '不能为空',
width: 100,
name: 'train.trainTitle'
},{
xtype: 'datefield',
fieldLabel: '时间',
allowBlank: false,
emptyText: '不能为空',
blankText: '不能为空',
width: 100,
name: 'train.trainDate',
format: 'Y-m-d'
}]
},{
layout: 'form',
width: 200,
items: [{
xtype: 'textfield',
fieldLabel: '培训人',
allowBlank: false,
emptyText: '不能为空',
blankText: '不能为空',
width: 100,
name: 'train.trainPerson'
},{
xtype: 'textfield',
fieldLabel: '地点',
allowBlank: false,
emptyText: '不能为空',
width: 100,
blankText: '不能为空',
name: 'train.trainPlace'
}]
},{
colspan: 2,
layout: 'form',
items: [{
xtype: 'textarea',
fieldLabel: '内容',
allowBlank: false,
emptyText: '不能为空',
blankText: '不能为空',
width: 300,
height: 100,
name: 'train.trainContent'
},{
xtype: 'textarea',
fieldLabel: '备注',
width: 300,
height: 100,
name: 'train.trainRemark'
},{
xtype: 'hidden',
name: 'train.trainId'
}]
}],
buttonAlign: 'center',
buttons: [{
columnWidth: .5,
text: '保存',
iconCls: 'save',
handler: saveTrainFn
},{
columnWidth: .5,
text: '关闭',
iconCls: 'cancel',
handler: function(){
Ext.getCmp('trainAddWinId').destroy();
}
}]
})
}
});
//保存
saveTrainFn = function(){
if(!Ext.getCmp('trainAddPanelId').getForm().isValid()){
return;
}
Ext.getCmp('trainAddPanelId').getForm().submit({
url: 'train_save.action',
method: 'post',
waitTitle: '提示',
waitMsg: '正在保存数据...',
success: saveTrainSuccessFn,
failure: saveTrainFailureFn
});
};
//保存成功处理
saveTrainSuccessFn = function(form, action){
Ext.Msg.confirm('提示',action.result.msg, function(button, text){
if(button == "yes"){
form.reset();
Ext.getCmp('trainAddWinId').destroy();
Ext.getCmp('trainInfoGridId').getStore().reload();
}
})
};
//保存失败处理
saveTrainFailureFn = function(form, action){
Ext.Msg.alert('提示','连接失败', function(button, text){});
};
5. 培训信息详情页面
//培训信息详情窗口
TrainDetailWin = Ext.extend(Ext.Window,{
id: 'trainDetailWinId',
constructor: function(){
var trainDetailPanel = new TrainDetailPanel();
TrainDetailWin.superclass.constructor.call(this, {
width: 500,
height: 400,
resizable: false, //不能改变窗体大小
title: '培训信息录入',
collapsible: true,
modal: true,
items: [trainDetailPanel]
})
}
})
//培训信息发布面板
TrainDetailPanel = Ext.extend(Ext.form.FormPanel,{
id: 'trainDetailPanelId',
constructor: function(){
Ext.QuickTips.init();
var reader = new Ext.data.JsonReader({},[{
name: 'train.trainTitle', mapping: 'trainTitle'
},{
name: 'train.trainDate', mapping: 'trainDate'
},{
name: 'train.trainPerson', mapping: 'trainPerson'
},{
name: 'train.trainRemark', mapping: 'trainRemark'
},{
name: 'train.trainContent', mapping: 'trainContent'
},{
name: 'train.trainPlace', mapping: 'trainPlace'
},{
name: 'train.trainId', mapping: 'trainId'
},{
name: 'train.trainAddDate', mapping: 'trainAddDate'
},{
name: 'train.trainAddPerson', mapping: 'trainAddPerson'
}]);
TrainDetailPanel.superclass.constructor.call(this,{
width: 490,
border: false,
height: 370,
frame: true,
layout: 'table',
reader: reader,
layoutConfig: {
columns: 2
},
defaults: {
labelWidth: 60,
labelAlign: 'right'
},
items:[{
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '标题',
style: 'background: #dfe8f6;',
width: 150,
name: 'train.trainTitle',
readOnly: true
},{
xtype: 'datefield',
fieldLabel: '时间',
width: 150,
style: 'background: #dfe8f6;',
name: 'train.trainDate',
format: 'Y-m-d',
readOnly: true
},{
xtype: 'textfield',
fieldLabel: '添加人',
width: 150,
style: 'background: #dfe8f6;',
name: 'train.trainAddPerson',
readOnly: true
}]
},{
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '培训人',
width: 150,
style: 'background: #dfe8f6;',
name: 'train.trainPerson',
readOnly: true
},{
xtype: 'textfield',
fieldLabel: '地点',
width: 150,
style: 'background: #dfe8f6;',
name: 'train.trainPlace',
readOnly: true
},{
xtype: 'textfield',
fieldLabel: '添加时间',
width: 150,
style: 'background: #dfe8f6;',
name: 'train.trainAddDate',
readOnly: true
}]
},{
colspan: 2,
layout: 'form',
items: [{
xtype: 'textarea',
fieldLabel: '内容',
width: 370,
height: 100,
style: 'background: #dfe8f6;',
name: 'train.trainContent',
readOnly: true
},{
xtype: 'textarea',
fieldLabel: '备注',
width: 370,
height: 100,
style: 'background: #dfe8f6;',
name: 'train.trainRemark',
readOnly: true
}]
}],
buttonAlign: 'center',
buttons: [{
text: '关闭',
iconCls: 'cancel',
handler: function(){
Ext.getCmp("trainDetailWinId").destroy();
}
}]
})
}
});
75.培训管理-培训信息发布 Extjs 页面的更多相关文章
- 织梦DedeCMS信息发布员发布文章阅读权限不用审核自动开放亲测试通过！
文章发布员在织梦dedecms后台添加文章时却要超级管理员审核,这无疑是增加了没必要的工作. 登录该账号发布文章你会发现该文章显示的是待审核稿件,且并没有生成静态文件,在前台是看不到这篇文章的,而多数 ...
- 织梦DedeCMS信息发布员发布文章默认自动审核更新并生成HTML页面
织梦DedeCMS信息发布员发布文章默认自动审核更新并生成HTML页面 一直以为DEDECMS的信息发布员在后台发布文章后,非要管理员审核才能显示,今天一哥们问我这个问题.问:“能不能直接发布,并自动 ...
- 纳税服务系统【信息发布管理、Ueditor、异步信息交互】
需求分析 我们现在来到了纳税服务系统的信息发布管理模块,首先我们跟着原型图来进行需求分析把: 一些普通的CRUD,值得一做的就是状态之间的切换了.停用和发布切换. 值得注意的是:在信息内容中,它可以带 ...
- 为上海莫大型重工企业提供基于TFS的软件研发流程管理培训
这周,和微软公司的朋友一起,受上海莫大型重工企业的要求,为企业软件部门一个60多人的软件团队提供了为其2天的全流程培训,培训基于微软Team Foundation Server 2017(TFS 20 ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇（用户管理功能的实现）
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现) 一.前三篇的内容是否对您有帮助呢?如果有的话,请您继续关注这篇吧,这篇主要是实现”用户管理“的 ...
- [毕业设计][期末作业]二手闲置小程序 免费信息发布系统功能源码（小程序+php后台管理）
最近做了一个小程序,主要是二手闲置免费信息发布系统的功能,里面包括了登录,发布商品,商品管理,违规投诉,canva商品海报生成,分享等一些基础的功能,可以说代码都是自己辛辛苦苦写出来的.可作为毕业设计 ...
- scrapy项目1：爬取某培训机构老师信息（spider类）
1.scrapy爬虫的流程,可简单该括为以下4步: 1).新建项目---->scrapy startproject 项目名称(例如:myspider) >>scrapy.cfg为项目 ...
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）
一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增删改查的地步.测试好之后再来看这篇文章,我的主框架相对来说简答一点,重点还是实现系统的功能,以及对Jquery-Eas ...
随机推荐
- vim下阅读代码时标签跳转设置
1.在fedora14中的 /etc/vimrc下,加入如下几行,可根据源代码工程文件的结构来定 2. 在源代码工程内,输入如下命令 ctags -R 当前目录下将生成一个tags文件 3.查看源代码 ...
- 实验2 C++数组与指针
一．实验目的: 掌握一维数组和二维数组的定义.赋值和输入输出的方法. 掌握字符数组和字符串函数的使用. 通过实验进一步掌握指针的概念,会定义和使用指针变量. 能正确使用数组的指针和指向数组的指针变量. ...
- 数字化婚姻配对尝试问题（C++实现）
问题描述:一.标题: 数字化婚姻配对尝试 二.题目: 建立一个模型,来模拟推导社会男女择偶过程. 为了模型简化,一个人的特性指标有三个,这里假设为财富.样貌.品格,每个指标均可取值1-100之间任意数 ...
- 踩过的坑：__file__、__package__和__name__
不说废话,直接上示例结构图 Path.py内容如下: import os path1 = os.path.dirname(os.path.abspath(__file__)) path2 = os.p ...
- HDU - 1087 Super Jumping！Jumping！Jumping！(dp求最长上升子序列的和)
传送门:HDU_1087 题意:现在要玩一个跳棋类游戏,有棋盘和棋子.从棋子st开始,跳到棋子en结束.跳动棋子的规则是下一个落脚的棋子的号码必须要大于当前棋子的号码.st的号是所有棋子中最小的,en ...
- 关于linux内核用纯c语言编写的思考
在阅读linux2.6 版本内核的虚拟文件系统和驱动子系统的时候,我发现内核纯用c语言编写其实也是有一点不方便,特别是内核中大量存在了对象的概念,比如说文件对象,描述起来使用对象描述,但是对象在c语言 ...
- Python3 编写登陆接口
题目选自 Alex Python自动化开发之路的题目,我是从C++转学Python的,编写的水平有限,轻喷. 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 首先应该有2个txt文件,包含用户 ...
- Flask - 内置Session
目录 Flask - 内置Session 基本用法 给视图添加装饰器验证 Flask - 内置Session Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cook ...
- BZOJ 1602 USACO 2008 Oct. 牧场行走
[题解] 要求出树上两点间的距离,树上的边有边权,本来应该是个LCA. 看他数据小,Xjb水过去了...其实也算是LCA吧,一个O(n)的LCA... #include<cstdio> # ...
- vue 使用插件
上传加载 :vue-infinite-loading