dept_list.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/examples.css" />
<script type="text/javascript" src="extjs/examples.js"></script>
<script type="text/javascript" src="dept.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="dept"></div>
<div id="topic-win" class="x-hidden">
</body>
</html>
dept.js文件
var _reader = new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:'depts'
},[
{name:"id",type:"int",mapping:"id"},
{name:"name",type:"string",mapping:"name"},
{name:"description",type:"string",mapping:"description"}
]);
var _store = new Ext.data.Store({
baseParams:{//起始参数，一般是表示分页的参数
start:0,
limit:20
},
sortInfo:{//数据排序的方式
field:"id",
direction:"asc"
},
//autoLoad:true,//是否自动加载数据
remoteSort:true,
reader:_reader,
proxy:new Ext.data.HttpProxy({
url:"dept.action",
method:"POST"
})
});
var _sm = new Ext.grid.CheckboxSelectionModel();//创建带复选框的选择模型
//列模型
var _cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//在第一列显示固定不动的行
_sm,
{header:"编号", width:40,dataIndex:"id"},
{header:"部门名称", width:150,dataIndex:"name"},
{header:"描述", dataIndex:"description",id:"description"}
]);
var addOrModifyFn = function(_url, _id){
new Ext.Window({
id:"addOrModifyWin",
//iconCls:xxx,
title:'添加部门',
width:400,
height:135,
resizable:false,//不可以调整大小
modal:true,//设置此Window为模式窗口,
animateTarget:'addDept',//当指定一个id或元素,window打开时会与元素之间产生动画效果
closeAction:'close',
listeners:{
'show':function(){
btn_add.disable();//当窗口显示时，则添加按钮不可用
},
'close':function(){
btn_add.enable();//当宣传品关闭时，则添加按钮可用
}
},
items:[{
xtype:"form",
labelWidth:75,
id:"deptForm",
//url:"dept.action",
frame:true,
//title:"添加部门",
bodyStyle:"padding:5px 5px 0",
border:false,
waitMsgTarget:true,//true的意思是说表单提交时的等待信息在这个表单之内显示，而不是弹出框(进度条形式的)
labelAlign:"right",
labelPad : 10,// 标签与字段录入框之间的空白
//reader:_reader,
//anchor: '100%',
defaults:{width:230},
defaultType:"textfield",
items:[{
xtype:"hidden",
name:"dept.id",
value:0
},{
fieldLabel:"部门名称",
name:"dept.name",
allowBlank:false,
emptyText:"输入部门名称……"
},{
fieldLabel:"描 述",
name:"dept.description",
allowBlank:false
}]
}],
buttonAlign:'center',
minButtonWidth:60,
buttons:[{
text:"提交",
tooltip:"提交数据",
handler:function(){
if(Ext.getCmp("deptForm").getForm().isValid()){//对表单进行验证(根据配置的项进行配置)
Ext.getCmp("deptForm").getForm().submit({//利用表单的submit方法提交表单
waitTitle:"请稍候", //提交表单时进度条的标题
waitMsg:"正在提交数据，稍后……", //提交表单时进度条的信息
url:_url, //提交地址
method:"POST", //提交方式，需要大写
success:function(form, action){ //如果提交成功后处理的方法
/*
Ext.Msg.alert("提交成功", "提交部门信息成功……",function(){
Ext.getCmp("addOrModifyWin").close();
_grid.getStore().reload();
});
*/
Ext.example.msg("提交成功", "提交部门信息成功……","msg-box-success");//相应的提示信息
Ext.getCmp("addOrModifyWin").close(); //根据id获取到表单的窗口，然后将其关闭
_grid.getStore().reload(); //提交成功后，需要刷新GridPanel数据，
//但效率时会将提交表单中的数据直接添加或更新到GridPanel中
},
failure:function(form,action){ //提交指失败进处理的方法
Ext.example.msg("警告","数据提交失败，请核对……","msg-box-error");
}
});
} else {//如果表单验证未通过则提示用户骓未通过。
Ext.example.msg("提示","请填写完整、合法的部门信息……","msg-box-error");
}
}
},{
text:"取消",
tooltip:"取消此操作",
handler:function(){
Ext.getCmp("addOrModifyWin").close();//取消实际上就是关闭窗口
}
}]
}).show();
if(_id){
var _form = Ext.getCmp("deptForm").getForm();
_form.reader = new Ext.data.JsonReader({
root:'dept'
},[
{name:"dept.id",type:"int",mapping:"id"},
{name:"dept.name",type:"string",mapping:"name"},
{name:"dept.description",type:"string",mapping:"description"}
]);
_form.load({url:"dept!findDeptById?dept.id=" + _id,
waitMsg: '正在载入数据...',
success:function(form, action){
Ext.example.msg("提示","数据加载成功……","msg-box-success");
},
failure:function(){
Ext.example.msg("异常","数据加载失败……","msg-box-error");
Ext.getCmp("addOrModifyWin").close();
}
});
}
}
var btn_add = new Ext.Button({
text:"添加",
tooltip:"添加部门",
id:"addDept",
iconCls:'icon-btn-add',
handler:function(){
new addOrModifyFn('dept!add');
}
});
var btn_modify = new Ext.Button({
text:'编辑',
tooltip:'编辑部门信息',
iconCls:'icon-btn-edit',
handler:function(){
var _selectModel = _grid.getSelectionModel();
if(_selectModel.hasSelection()){
//Ext.example.msg("选择了","你选择了数据行","");
var _rec = _selectModel.getSelected();
new addOrModifyFn('dept!modify',_rec.get('id'));
} else {
Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error");
}
}
});
var _grid = new Ext.grid.GridPanel({
id:"deptGridPnael",
iconCls:"icon-grid",
loadMask : {msg : '数据正在加载中，请稍候...'},//表示为当grid加载过程中，会有一个Ext.LoadMask的遮罩效果
//title:"部门管理",
region:"center",//表示区域
//autoWidth:true,
//autoHeight:true,
columnLines:true,//True表示为在列分隔处显示分隔符
cm:_cm,
sm:_sm,
enableColumnMove:false,//列不可拖动
trackMouseOver:true,//是给Grid实现鼠标在行经过时的轨迹效果
frame:true,
store:_store,
//renderTo:"dept",
autoExpandColumn:"description",
tbar:[btn_add,"-",btn_modify],
bbar:
new Ext.PagingToolbar({
store:_store,
pageSize:20,
displayInfo:true,
displayMsg:"第 {0} - {1} 条 共 {2} 条",
emptyMsg:"没有记录"
})
});
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
var viewPort = new Ext.Viewport({
layout : 'fit',
items : [_grid]
});
_store.load();
});
分享到：
相关推荐
本Demo采用Struts2.1.8+Spring2.5.6(Annotation注解)+Hiberante3.3.2(Annotation注解)+ExtJS(Struts2-json)
将struts-2.1.6\lib目录下的struts2-codebehind-plugin-2.1.6.jar、struts2-core-2.1.6.jar、struts2-spring-plugin-2.1.6.jar、xwork-2.1.2.jar、ognl-2.6.11.jar、freemarker-2.3.13.jar、commons-fileupload-...
struts2-extjs4.rar extjs4通过json和struts2进行交互的demo
Extjs3.x入门学习指南，还附带一些常用控件属性的详细描述和使用说明
在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树，但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包，供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...
struts2 学习参考文档，spring 结合学习参考文档，希望对大家都有帮助
本系统所用框架 struts2 spring ibatis extjs 数据库采用sqlserver 实现图书基本管理功能,对学习这些框架的人来说是难得的资源，包占空间大大我没放进来,我把包的名称都写下来了，系统没有问题，配置跑不通自己好好...
使用ExtJs获取后台json格式的数据必须的七个jar包，commons-beanuti-1s-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-logging-1.0.4.jar，ezmorph-1.0.4.jar，json-lib-2.1.jar，...
帮大家整理整理一下 extjs3.x 官方大量示例 以及chm版api
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
ExtJS3.x 中文帮助文档，是 CHM 格式的，方便阅读和查询。本人正在使用，效果不错，共享出来，方便大家。
Nexus是一个强大的Maven仓库管理器，它极大地简化了自己内部仓库的维护和外部仓库的访问。利用Nexus你可以只在一个地方就能够完全控制访问 和部署在你所维护仓库中的每个Artifact。Nexus是一套“开箱即用”的系统不...
一个运用Extjs，Struts2, json，iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接：http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs，Struts2, json，iterator技术， 将数据从...
ExtJS+struts2+json登陆实例--源码，适合初学者
ExtJS2.X 版本app 这个版本目前找不到了噢
ExtJs + Struts2 + JSON 程序总结
struts2 json extjs 完整实例 struts2 json extjs 完整实例 完整可用 无错！ struts2 json extjs 完整实例 struts2 json extjs 完整实例 完整可用 无错！ struts2 json extjs 完整实例 struts2 json extjs 完整...
Nexus是一个强大的Maven仓库管理器，它极大地简化了自己内部仓库的维护和外部仓库的访问。利用Nexus你可以只在一个地方就能够完全控制访问 和部署在你所维护仓库中的每个Artifact。Nexus是一套“开箱即用”的系统不...
Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统
详细的介绍了EXT2.X各种对象的属性、方法、事件