EXT 3 上传文件控件浏览按钮国际化
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="page" uri="/WEB-INF/tlds/paginated.tld"%>
<%@ include file="../common/language.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../style/base<%=language_css%>.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" type="text/css"
href="../js/ext/resources/css/ext-all.css"></link>
<%@ include file="../common/commonJS.jsp"%>
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext
.onReady( function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = "../js/ext/resources/images/default/s.gif";
Ext.form.Field.prototype.msgTarget = 'side';
var btn = new Ext.Button(
{
id : 'dd',
text : '<s:text name="msg.portalMS.jsp.file.browse"/> ',
listeners : {
render : function() {
var button_container = this.el.child("em");
button_container.position("relative");
this.input_file = Ext.DomHelper
.append(
button_container,
{
tag : "input",
type : "file",
size : 1,
name : this.input_name
|| Ext
.id(this.el),
style : "z-index: 99999;position: absolute;display: block; border: none;cursor: pointer;"
}, true);
this.input_file.setOpacity(0);
this.input_file.on("click", function(e) {
e.stopPropagation()
})
this.input_file.on("change", function(e) {
var value = this.input_file.dom.value;
panel.getForm().findField('fileValue')
.setValue(value);
}, this)
btn_cont = this.el.child("em");
btn_box = btn_cont.getBox();
this.input_file.setStyle("font-size",
(btn_box.width * 0.5) + "px");
inp_box = this.input_file.getBox();
adj = {
x : 3,
y : 3
};
this.input_file.setLeft(btn_box.width
- inp_box.width + adj.x + "px");
this.input_file.setTop(btn_box.height
- inp_box.height + adj.y + "px")
}
}
});
var panel = new Ext.form.FormPanel(
{
url : '../template/uploadServlet?t=' + new Date(),
autoScroll : true,
applyTo : 'form',
frame : true,
width : 550,
height : 130,
buttonAlign : 'center',
fileUpload : true,
title : 'panel1',
items : [ {
border : false,
layout : 'table',
items : [
{
layout : 'form',
// hideLabels : true, 隐藏标签
border : false,
labelAlign : 'right',
style : 'padding-top:3px;',
items : new Ext.form.TextField(
{
id : 'file',
name : 'fileValue',
fieldLabel : '<s:text name="msg.portalMS.template.file"/> '
})
}, {
border : false,
style : 'padding-left:2px;',
items : btn
} ]
} ],
buttons : [ {
text : '<s:text name="msg.portalMS.template.upload.begin"/>',
handler : function() {
var fileField = Ext.getCmp('file');
var fileValue = fileField.getValue();
if (Ext.isEmpty(fileValue)) {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.system.error.tip1'/>");
return;
} else {
if (-1 == fileValue.toLocaleLowerCase()
.lastIndexOf(".zip")) {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.system.error.tip2'/>");
return;
}
}
//点击'开始上传'之后，将由这个function来处理。
if (panel.form.isValid()) {//验证form， 本例略掉了
//显示进度条
Ext.MessageBox
.show( {
title : '<s:text name="msg.portalMS.template.uploading"/>',
width : 240,
progress : true,
closable : true,
progressText : '<s:text name="msg.portalMS.template.uploading"/>...'
});
var submitUrl = '../template/uploadServlet?t=' + new Date();
//form提交
panel.getForm().submit( {
url : submitUrl,
method : 'POST'
});
//设置一个定时器，每500毫秒向processController发送一次ajax请求
var i = 0;
var timer = setInterval(
function() {
Ext.Ajax
.request( {
//以后凡是在ajax的请求的url上面都要带上日期戳，
url : '../template/processController.action?t=' + new Date(),
method : 'get',
//处理ajax的返回数据
success : function(
response,
options) {
status = response.responseText
+ " "
+ i++;
var obj = Ext.util.JSON
.decode(response.responseText);
if (obj.success == true) {
if (obj.finished) {
clearInterval(timer);
status = response.responseText;
Ext.MessageBox
.updateProgress(
1,
'finished',
'finished');
Ext.MessageBox
.hide();
Ext.MessageBox
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.system.success.tip'/>",
function(
e) {
var tempTemplateDir = obj.msg;
window.location.href = '../template/editTemplate.action?action=toAddInput&template.templatePath=' + tempTemplateDir;
return;
});
} else {
Ext.MessageBox
.updateProgress(
obj.percentage,
obj.msg);
}
} else {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
obj.msg);
}
},
failure : function(
response,
options) {
clearInterval(timer);
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.error'/>",
"<s:text name='msg.portalMS.template.system.error.tip'/>");
}
});
}, 500);
} else {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.tip.error'/>");
}
}
} ]
});
});
</script>
</head>
<body>
<div class="r_main">
<!---导航 --->
<div class="r_nav">
<div class="left">
<img src="../images/nav_l.gif" width="5" height="29" />
</div>
<div class="ct">
<s:text name="msg.portalMS.system.current.position" />
<s:text name="msg.portalMS.template.guide.index" />
</div>
<div class="right">
<img src="../images/nav_r.jpg" width="5" height="29" />
</div>
</div>
</div>
<div id="form">
</div>
</body>
</html>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="page" uri="/WEB-INF/tlds/paginated.tld"%>
<%@ include file="../common/language.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../style/base<%=language_css%>.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" type="text/css"
href="../js/ext/resources/css/ext-all.css"></link>
<%@ include file="../common/commonJS.jsp"%>
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext
.onReady( function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = "../js/ext/resources/images/default/s.gif";
Ext.form.Field.prototype.msgTarget = 'side';
var btn = new Ext.Button(
{
id : 'dd',
text : '<s:text name="msg.portalMS.jsp.file.browse"/> ',
listeners : {
render : function() {
var button_container = this.el.child("em");
button_container.position("relative");
this.input_file = Ext.DomHelper
.append(
button_container,
{
tag : "input",
type : "file",
size : 1,
name : this.input_name
|| Ext
.id(this.el),
style : "z-index: 99999;position: absolute;display: block; border: none;cursor: pointer;"
}, true);
this.input_file.setOpacity(0);
this.input_file.on("click", function(e) {
e.stopPropagation()
})
this.input_file.on("change", function(e) {
var value = this.input_file.dom.value;
panel.getForm().findField('fileValue')
.setValue(value);
}, this)
btn_cont = this.el.child("em");
btn_box = btn_cont.getBox();
this.input_file.setStyle("font-size",
(btn_box.width * 0.5) + "px");
inp_box = this.input_file.getBox();
adj = {
x : 3,
y : 3
};
this.input_file.setLeft(btn_box.width
- inp_box.width + adj.x + "px");
this.input_file.setTop(btn_box.height
- inp_box.height + adj.y + "px")
}
}
});
var panel = new Ext.form.FormPanel(
{
url : '../template/uploadServlet?t=' + new Date(),
autoScroll : true,
applyTo : 'form',
frame : true,
width : 550,
height : 130,
buttonAlign : 'center',
fileUpload : true,
title : 'panel1',
items : [ {
border : false,
layout : 'table',
items : [
{
layout : 'form',
// hideLabels : true, 隐藏标签
border : false,
labelAlign : 'right',
style : 'padding-top:3px;',
items : new Ext.form.TextField(
{
id : 'file',
name : 'fileValue',
fieldLabel : '<s:text name="msg.portalMS.template.file"/> '
})
}, {
border : false,
style : 'padding-left:2px;',
items : btn
} ]
} ],
buttons : [ {
text : '<s:text name="msg.portalMS.template.upload.begin"/>',
handler : function() {
var fileField = Ext.getCmp('file');
var fileValue = fileField.getValue();
if (Ext.isEmpty(fileValue)) {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.system.error.tip1'/>");
return;
} else {
if (-1 == fileValue.toLocaleLowerCase()
.lastIndexOf(".zip")) {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.system.error.tip2'/>");
return;
}
}
//点击'开始上传'之后，将由这个function来处理。
if (panel.form.isValid()) {//验证form， 本例略掉了
//显示进度条
Ext.MessageBox
.show( {
title : '<s:text name="msg.portalMS.template.uploading"/>',
width : 240,
progress : true,
closable : true,
progressText : '<s:text name="msg.portalMS.template.uploading"/>...'
});
var submitUrl = '../template/uploadServlet?t=' + new Date();
//form提交
panel.getForm().submit( {
url : submitUrl,
method : 'POST'
});
//设置一个定时器，每500毫秒向processController发送一次ajax请求
var i = 0;
var timer = setInterval(
function() {
Ext.Ajax
.request( {
//以后凡是在ajax的请求的url上面都要带上日期戳，
url : '../template/processController.action?t=' + new Date(),
method : 'get',
//处理ajax的返回数据
success : function(
response,
options) {
status = response.responseText
+ " "
+ i++;
var obj = Ext.util.JSON
.decode(response.responseText);
if (obj.success == true) {
if (obj.finished) {
clearInterval(timer);
status = response.responseText;
Ext.MessageBox
.updateProgress(
1,
'finished',
'finished');
Ext.MessageBox
.hide();
Ext.MessageBox
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.system.success.tip'/>",
function(
e) {
var tempTemplateDir = obj.msg;
window.location.href = '../template/editTemplate.action?action=toAddInput&template.templatePath=' + tempTemplateDir;
return;
});
} else {
Ext.MessageBox
.updateProgress(
obj.percentage,
obj.msg);
}
} else {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
obj.msg);
}
},
failure : function(
response,
options) {
clearInterval(timer);
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.error'/>",
"<s:text name='msg.portalMS.template.system.error.tip'/>");
}
});
}, 500);
} else {
Ext.Msg
.alert(
"<s:text name='msg.portalMS.template.system.tip'/>",
"<s:text name='msg.portalMS.template.tip.error'/>");
}
}
} ]
});
});
</script>
</head>
<body>
<div class="r_main">
<!---导航 --->
<div class="r_nav">
<div class="left">
<img src="../images/nav_l.gif" width="5" height="29" />
</div>
<div class="ct">
<s:text name="msg.portalMS.system.current.position" />
<s:text name="msg.portalMS.template.guide.index" />
</div>
<div class="right">
<img src="../images/nav_r.jpg" width="5" height="29" />
</div>
</div>
</div>
<div id="form">
</div>
</body>
</html>