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 ...
随机推荐
- windows 设置注册表服务自动启动
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\xxx\Start = ,=自动,,=禁用
- 初学者怎么才能快速学会Python？
提起对Python的印象,除了全能之外恐怕就是简单易学了.很多人都在推荐新手学Python入门,毕竟语法简单.语句简洁,所谓“人生苦短我用Python”绝不是一句空话.不过也不能忽视一点:Python ...
- Ansible 利用playbook批量部署Nginx
我这里直接部署的,环境已经搭建好,如果不知道的小伙伴可以看上一遍ansible搭建,都写好了,这里是根据前面环境部署的 192.168.30.21 ansible 192.168.30.25 ...
- 30.3 FCL中的混合构造
30.3.2 Monitor类和同步块 internal sealed class Transaction { private readonly object _lock = new object( ...
- SDOI2018退役记
在NOIp2017中,我意识到自己啥也不会.如今SDOI2018快来了,自己还是啥也不会.高一两次考试注定以打两次酱油告终.还是记录一下,到NOIp之后如果还没有退役的话,那这个博客可能还会继续更新吧 ...
- Python-----基本操作
Python是一种简单易学,且功能强大的编程语言.它是面向对象的编程语言. 对象的意义: 对象可以通过一个“.” 的方式来调用这个对象的方法. Python环境安装配置: Python是一种通用的计算 ...
- 第十节：numpy之数组文件操作
1.安装ipython 2.创建txt文件 3.直接上代码:
- 6.3.4 使用marshal 模块操作二进制文件
Python 标准库 marshal 也可以进行对象的序列化和反序列化,下面的代码进行了简单演示. import marshal x1 = 30 x2 = 5.0 x3 = [1,2,3] x4 = ...
- （问题待解决）sql查询不显示前置‘0’的问题
SELECT * , ,),() ) ' end)) from CourseBooksNotes ),)),)+'秒'; ),)),)),)+'秒'
- MG loves string
MG loves string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others ...