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();
});
分享到：
相关推荐
这个压缩包“struts2-hibernate-spring-Extjs-json.rar”显然包含了关于这些技术整合使用的参考资料。下面将详细阐述这些技术以及它们之间的交互。 1. **Struts2**： Struts2是一个基于MVC（模型-视图-控制器）...
本篇将基于"Extjs3.x入门学习"这一主题，深入探讨相关知识点。 1. **EXT_JS实用开发指南**： 这份文档可能包含了关于ExtJS的基本概念、架构以及开发流程的介绍，帮助初学者快速上手。可能包括如何创建基本的页面...
综上所述，"extjs3.x 官方示例以及chm版api"为开发者提供了一套完整的ExtJS 3.x 学习和开发资源，包括实际的示例应用和详细的API文档，是深入理解和掌握这一版本ExtJS的关键工具。通过学习和实践，开发者可以高效地...
### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容...
在与Struts2结合时，Struts2的JSON插件可以将服务器端的数据转换成JSON格式，方便ExtJS的组件直接使用，实现异步数据加载和页面动态更新。 总的来说，这个DEMO展示了如何将这些技术有效地整合，构建一个完整的Java ...
通过这个示例项目，开发者可以学习如何设置Struts2的Action来生成JSON，如何在ExtJS4中配置Ajax请求，以及如何解析和展示接收到的JSON数据。这有助于理解和掌握两者的集成技术，从而在实际项目中实现更高效的数据...
在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树，但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包，供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...
在本文中，我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能，结合Struts2框架进行数据处理。首先，我们需要确保环境配置正确。在描述中提到，我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...
本系统所用框架 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，...
总结来说，这个实例展示了如何将前端的ExtJS4框架，特别是其Accordion布局和Ext.tree.Panel组件，与Servlet和Struts2后端框架集成，利用JSON进行数据交换，来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...
通过Struts2处理后端逻辑并返回JSON数据，EXTJS能够动态地更新页面，呈现复杂的数据结构，从而提高用户体验。这种技术栈在现代企业级Web开发中非常常见，因为它能够简化数据交互，同时保持良好的性能和可维护性。
标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合，通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库，用于构建富客户端Web应用程序，而Struts是Java Web开发中的一个MVC...
【标题】"Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统"是一个基于Java技术栈的开源项目，它利用了Struts2框架的json-plugin插件，Spring2作为服务层管理和依赖注入框架，以及ExtJS2.2作为前端展示...
这是一个基于ExtJS、Struts2和JSON的登录实例，适合初学者学习Web应用程序开发。这个实例演示了如何将前端的JavaScript框架ExtJS与后端的Java MVC框架Struts2结合，通过JSON进行数据交换实现用户登录功能。下面将...
此外，为了实现`ExtJS`和`Struts2`的无缝对接，开发者可能还使用了一些特定的插件或库，比如`struts2-extjs-plugin`，它可能提供了便利的配置和组件，简化了两者之间的集成工作。 综上所述，`@@@extjs+struts2+json...
Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js
1. **设置Struts2的JSON插件**：在Struts2项目中，需要添加struts2-json-plugin库，然后在struts.xml配置文件中启用JSON结果类型。 2. **创建Action类**：编写处理用户请求的Action，通常会有一个方法返回一个包含...
在标签"json_hibernate extjs json_struts_ext jsp_json_extjs struts2"中，"json_struts_ext"和"jsp_json_extjs"暗示了JSON在Struts2扩展和JSP与ExtJS之间的交互作用。可能有一个配置或者插件用于让Struts2的动作类...
一个运用Extjs，Struts2, json，iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接：http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs，Struts2, json，iterator技术， 将数据从...