EXT 3 上传文件控件浏览按钮国际化

来源:互联网 发布:淘宝开店程序 编辑:程序博客网 时间:2024/05/22 02:31
<%@ 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>
0 0