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 ...
随机推荐
- SQL基本操作——DROP撤销索引、表以及数据库
DROP撤销索引.表以及数据库 --DROP INDEX 命令删除表格中的索引 DROP INDEX table_name.index_name --DROP TABLE 语句删除表(表的结构.属性以 ...
- 【技术累积】【点】【java】【26】@Value默认值
@Value 该注解可以把配置文件中的值赋给属性 @Value("${shit.config}") private String shit; 要在xml文件中设置扫描包+place ...
- Centos6.7 安装Naigos教程
Centos6.7 安装Naigos教程参考文档:https://assets.nagios.com/downloads/nagioscore/docs/nagioscore/4/en/quickst ...
- C# 获得Properties下的定义的资源
var str1 = Properties.Resources.ResourceManager.GetObject("String1", null); string url = S ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- VMware或者KVM克隆的虚拟机网卡无法启动
在VMware里克隆出来的CentOS Linux.. ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting ...
- python之urllib库
urllib库 urllib库是Python中一个最基本的网络请求库.可以模拟浏览器的行为,向指定的服务器发送一个请求,并可以保存服务器返回的数据. urlopen函数: 在Python3的urlli ...
- node版本管理工具nvm安装使用教程
一些安装包依赖一定的node版本,可以采用nvm管理node, 可以快速的进行版本切换. 操作系统: windows10, x64 常见版本工具: 1. nvmw, nvmm install node ...
- 图的连通性问题之连通和最小环——Floyd算法
Floyd 判断连通性 d[i][j]仅表示i,j之间是否联通 ;k<=n;k++) ;i<=n;i++) ;j<=n;j++) dis[i][j]=dis[i][j]||(dis[ ...
- Vova and Train (codeforces 1066A)
数学题.用右边界以内的区间内的灯减去左边界以内区间内的灯,并且如果左边界正好有灯再减去一即可 我的代码 #include <bits/stdc++.h> using namespace s ...