本文介绍了一个使用Struts框架与ExtJS前端库集成的实际案例，展示了如何实现包括添加、编辑、删除等基本CRUD操作，并包含了会话超时处理及自定义验证规则。
http://www.blogjava.net/baoyaer/category/17562.html
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()
+":"+request.getServerPort()+path+"/";
%>
<head>
<link rel="stylesheet" type="text/css" media="screen" href='<s:url value="/extjs/css/index.css"/>' />
<link rel="stylesheet" type="text/css" media="screen" href='<s:url value="/extjs/css/ext-all.css"/>' />
<script type="text/javascript" charset="utf-8" src='<s:url value="/extjs/ext-base.js"/>'></script>
<script type="text/javascript" charset="utf-8" src='<s:url value="/extjs/ext-all.js"/>'></script>
<script type="text/javascript" charset="utf-8" src='<s:url value="/extjs/ext-lang-zh_CN.js"/>'></script>
</head>
<body>
<script type="text/javascript"><!--
document.body.oncontextmenu=function(){return false;};
Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
var result = eval('(' + response.responseText + ')');
if(typeof result.timeout != 'undefined'){
if(result.timeout){
window.parent.Ext.Msg.show({
title : '超时提示',
msg : '您的登录已超时，系统即将关闭，请重新开启浏览器登录',
width : 400,
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR,
fn : function(){
window.parent.document.location = '<%=basePath%>';
}
});
}
}
}
/*删除按钮*/
var btn_del_carrier = new Ext.Button({
text : '删除承运单位',
iconCls : 'icon-del',
handler : function() {
if(sm_carrier.hasSelection()){
Ext.Msg.show({
title:'确认删除',
msg: '您确定删除该条记录?',
buttons: Ext.Msg.YESNO,
width : 250,
fn: function(btn){
if(btn=='yes'){
var list = sm_carrier.getSelections();
var rList = [];
for (var i = 0; i < list.length; i++) {
rList[i] = list[i].data.carrierCode;
}
Ext.MessageBox.wait('正在删除数据, 请稍侯 ...', '提示');
Ext.Ajax.request({
url : 'deleteArchCarrierAction.action',
params : {idList : Ext.util.JSON.encode(rList)},
success : function(resp, ops) {
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
var result = Ext.util.JSON.decode(resp.responseText);
if(!result.success){
Ext.Msg.show({
title : '错误提示',
msg : '删除承运单位失败!',
width : 250,
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
return;
}
ds_carrier.load({params : {start : 0,limit : 20}});
},
failure : function() {
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
Ext.Msg.show({
title : '错误提示',
msg : '删除时发生错误!',
width : 200,
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
},
icon: Ext.MessageBox.QUESTION
});
}else{
Ext.Msg.show({
title : '提示',
msg : '请先选择一条记录再删除!',
buttons : Ext.Msg.OK,
//buttons: Ext.Msg.YESNO,
//buttons: Ext.Msg.YESNOCANCEL,
width : 250,
icon : Ext.Msg.INFO
//icon:Ext.Msg.QUESTION
//icon : Ext.Msg.ERROR
//fn:function(e){alert(e+"-------")}
});
//Ext.Msg.confirm("title","内容",function(e){ alert(e+"----")});
//Ext.MessageBox.alert("aaaa","bbbb" ,function(e){alert(e+"---------")});
Ext.Panel({
title: 'My Panel',//标题
collapsible:true,//右上角上的那个收缩按钮，设为false则不显示
renderTo: 'container',//这个panel显示在html中id为container的层中
width:400,
height:200,
html: "我是内容，我包含的html可以被执行！"//panel主体中的内容，可以执行html代码
});
}
}
});
//----------------------承运单位列表-------------------------------
var sm_carrier = new Ext.grid.CheckboxSelectionModel({width : 25});
var cm_carrier = new Ext.grid.ColumnModel([ sm_carrier,
{header : '承运单位代码', width : 20, dataIndex : 'carrierCode', sortable : true,align:'center'},
{header : '承运单位名称', width : 80, dataIndex : 'carrierName', sortable : true,align:'center'}]
);
var ds_carrier = new Ext.data.Store({
url : 'findAllArchCarrierAction.action',
reader : new Ext.data.JsonReader(
{totalProperty : 'totalProperty',root : 'root'},
[{name : 'carrierCode',type : 'string'},
{name : 'carrierName',type : 'string'}
])
});
//数据源查询条件赋值
ds_carrier.on('beforeload',function(){
Ext.apply(this.baseParams, {
menuId : '<s:property value="#parameters.menuId" />'
});
});
var ptb = new Ext.PagingToolbar({
pageSize : 20,
store : ds_carrier,
displayInfo : true,
displayMsg : '第 {0} - {1} 条 共 {2} 条',
emptyMsg : "没有记录"
});
/*添加承运单位表单*/
var form_carrier = new Ext.FormPanel({
labelAlign : 'right',
labelWidth : 100,
bodyStyle : 'padding:5px',
border : false,
fileUpload : false,
baseCls : 'x-plain',
columnWidth :300,
layout : 'form',
border : false,
defaultType : 'textfield',
defaults : {anchor : '93%'},
items : [
{fieldLabel : '承运单位代码', id : 'archCarrier.carrierCode', name : 'archCarrier.carrierCode', allowBlank : false, maxLength : 20},
{fieldLabel : '承运单位名称', id : 'archCarrier.carrierName', name : 'archCarrier.carrierName', allowBlank : false, maxLength : 25},
{xtype : 'hidden', name : 'addOredit'}
],
buttonAlign : 'center',
buttons : [{
text : '确定',
handler : function(){
if(form_carrier.getForm().isValid()){
form_carrier.getForm().submit({
url : 'saveArchCarrierAction.action?menuId=<s:property value="#parameters.menuId" />',
timeout : 100,
waitTitle : '请稍候',
waitMsg : '正在提交数据,请稍候...',
success : function(action, form){
Ext.Msg.show({
title : '成功提示',
msg : '数据保存成功!',
buttons : Ext.Msg.OK,
width : 200,
icon : Ext.Msg.INFO
});
win_add_carrier.hide();
ds_carrier.load({params : {start : 0,limit : 20}});
},
failure : function(form,action){
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID :
Ext.Msg.alert('错误！', '存在未通过验证的数据!');
break;
case Ext.form.Action.CONNECT_FAILURE :
Ext.Msg.alert('错误！', '数据库保存失败!');
break;
case Ext.form.Action.SERVER_INVALID :
Ext.Msg.alert('错误!', action.result.msg);
default :
Ext.Msg.show({
title : '失败提示',
msg : '该承运单位编号已存在!',
buttons : Ext.Msg.OK,
width : 250,
icon : Ext.Msg.INFO
});
}
}
});
}
}
},{
text : '取消',
handler : function(){
win_add_carrier.hide();
}
}]
});
/*添加货位窗口*/
var win_add_carrier = new Ext.Window({
title : '添加承运单位',
width : 350,
resizable : false,
autoHeight : true,
modal : true,
closeAction : 'hide',
items : [form_carrier]
});
/*添加承运单位按钮*/
var btn_add_carrier = new Ext.Button({
text : '添加承运单位',
iconCls : 'icon-add',
handler : function() {
win_add_carrier.setTitle('添加承运单位');
win_add_carrier.show();
form_carrier.getForm().reset();
form_carrier.getForm().findField('addOredit').setValue('add');
Ext.get("archCarrier.carrierCode").dom.readOnly = false;
}
});
/*编辑承运单位按钮*/
var btn_edit_carrier = new Ext.Button({
text : '编辑承运单位',
iconCls : 'icon-edit',
handler : function() {
if(sm_carrier.getCount()==1){
var record = sm_carrier.getSelected().data;
win_add_carrier.setTitle('编辑承运单位');
win_add_carrier.show();
form_carrier.getForm().reset();
form_carrier.getForm().findField('addOredit').setValue('edit');
form_carrier.getForm().findField('archCarrier.carrierCode').setValue(record.carrierCode);
form_carrier.getForm().findField('archCarrier.carrierName').setValue(record.carrierName);
Ext.get("archCarrier.carrierCode").dom.readOnly = true;
}else{
Ext.Msg.show({
title : '提示',
msg : '请先选择一条记录再编辑!',
buttons : Ext.Msg.OK,
width : 250,
icon : Ext.Msg.INFO
});
}
}
});
/*查询按钮*/
var btn_search_user = new Ext.Button({
text : '查询',
iconCls : 'icon-search',
handler : function(){
ds_carrier.load({params : {start : 0,limit : 20}});
}
});
/*承运单位信息列表信息列表*/
var grid_carrier = new Ext.grid.GridPanel({
title : '承运单位列表',
region : 'center',
loadMask : {msg : '数据加载中...'},
enableColumnMove : false,
cm : cm_carrier,
ds : ds_carrier,
sm : sm_carrier,
viewConfig : {forceFit : true},
tbar : [btn_add_carrier,'-',btn_edit_carrier,'-',btn_del_carrier],
bbar : ptb
});
Ext.onReady(function(){
/*用户表单校验不加这2行不显示错误校验信息*/
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var viewport = new Ext.Viewport({
layout : 'border',
frame : true,
border : false,
items : [grid_carrier]
});
ds_carrier.load({params : {start : 0,limit : 20}});
});
// 扩展extjs的验证！
Ext.apply(Ext.form.VTypes, {
// 电子邮箱
email : function(v) {
var r = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
return r.test(v);
},
// 固定电话、传真
phone : function(v) {
var r = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
return r.test(v);
},
// 移动电话
mobile : function(v) {
var r = /^((\(\d{2,3}\))|(\d{3}\-))?1\d{10}$/;
return r.test(v);
},
// 邮政编码
zip : function(v) {
var r = /^[1-9]\d{5}$/;
return r.test(v);
},
// 搜索关键字过滤
search : function(v) {
var r = /^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]*$/;
return r.test(v);
},
// 简体中文
chinese : function(v) {
var r = /^[\u0391-\uFFE5]+$/;
return r.test(v);
},
// 非中文
noChinese : function(v) {
var r = /^^[\u0391-\uFFE5]+$/;
return r.test(v);
},
// 货币
currency : function(v) {
var r = /^\d+(\.\d+)?$/;
return r.test(v);
},
// QQ
qq : function(v) {
var r = /^[1-9]\d{4,8}$/;
return r.test(v);
},
// 实数
double : function(v) {
var r = /^[-\+]?\d+(\.\d+)?$/;
return r.test(v);
},
// 正整数
int : function(v) {
var r = /^[0-9]*[1-9][0-9]*$/;
return r.test(v);
},
// 安全密码
safe : function(v) {
var r = /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/;
return !r.test(v);
},
emailText : '请输入正确的电子邮箱!<br />格式如：email@163.com',
phoneText : '请输入正确的电话或传真号码!<br />格式如：0000-XXXXXXXX',
mobileText : '请输入正确的移动电话号码!<br />格式如：13XXXXXXXXX',
zipText : '请输入正确的邮政编码!',
searchText : '请不要输入非法的搜索字符!',
chineseText : '您只能在这里输入中文字符!',
noChineseText : '您不能在这里输入中文字符!',
currencyText : '请输入货币值!<br />格式如：1.00',
qqText : '请输入合法的QQ号码!',
doubleText : '请输入实数值,可带+/-号!',
intText : '请输入正整数！',
safeText : '请输入足够安全的字符,包含英文和数字货其他字符!'
});
--></script>
</body>
</html>
扫一扫
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
