整合EXT JS 和 SSH2框架

提出一种将EXT JS作为展示层技术如何整合到SSH2框架中。基本的思想就是通过EXT JS的AJAX请求连接到Struts的action，用html document元素来获取用户输入值，并通过GET的方法将参数传递给action，处理完毕后用json来回传结果数据。

EXT JS是一个javascript库，该框架提供了很强大的富客户端体验，但由于EXT JS主要是客户端的技术，与服务器端技术整合有一定的困难。国内的EasyJWeb框架提供了强大的整合方案，在此本文仅提供一种简单的整合方案，就是通过AJAX请求来实现。

首先，请下载Ext JS2.0的库文件并将该文件夹放到项目的web路径下。对于如何开发EXT JS应用，在这里就不详述了，请参照其他网站上的例程。

如果想在EXT JS中使用Struts的标签，例如对EXT JS的控件中的文本进行国际化，则必须将JavaScript代码写到JSP页面中，如果写在单独的js文件里面，是无法访问Struts标签的。例如声明一个对话框：

        var xxx = Ext.MessageBox.show({
                    id:'loginProcess',
                    title: '<s:text name="title"/>',
                    msg: '<s:text name="login"/>',
                    progressText: '',
                    width:300,
                    progress:true,
                    closable:true,
                    animEl: 'loading'
                });

 在资源文件中定义title=请稍后.. title即可读出。

你可以定义一个不显示的层来放置包含Struts标签的登陆框，然后再用EXT的窗口来包装这个登陆框：

<div id="divLoginWindow" style="display:none; ">
            <div id="divLoginInfo">
                <table id="tableLogin2" align="center">
                    <tr>
                        <td align="left"><s:textfield size="16" maxlength="20" id="name" name="username" label="%{getText('username')}"/></td>
                    </tr>
                    <tr>
                        <td align="left"><s:password size="16" maxlength="20" id="pwd" name="password" label="%{getText('password')}"/></td>
                    </tr>
                </table>
            </div>
        </div>
       
        <!--用于输出消息-->
        <div id="divMessageTip"></div>

然后在EXT JS的窗口中显示这个层：

             winLogin = new Ext.Window({
                       el:'divLoginWindow',
                        //layout:'fit',
                        //modal:true,
                        title:'<center>用户登录</center>',
                        width:250,
                        height:150,
                        resizable:false,
                        closeAction:'hide',
                       items: [divLoginInfo],
                        buttons: [{
                                text:'确  定',
                                handler: function(){login(imgId);}//function(){document.getElementById('loginSubmit').click();}
                            }]
                    });

整合的关键在于建立ajax请求，并向action传递参数：

                var conn = new Ext.data.Connection();
                // 发送异步请求
                conn.request({
                    // 请求地址
                   url: 'login2.action',
                    method: 'GET',
                    params:'username='+document.getElementById('name').value+'&password='+document.getElementById('pwd').value,
                    // 指定回调函数
                    callback: callback
                });

注意红色部分的代码，采用document元素来获取Struts标签的值，并以参数的形式设置到AJAX请求中。注意url属性，必须标明 .action，否则EXT会找不到Struts的action。再看一下login2.action的内容（配置在这里就不多说了，请参考上一篇文章）：

    private UserServiceImpl userService;
    private String message;
    private String username;
    private String password;
    private String checkcode;
    private ResourceBundleMessageSource messageSource;

属性部分与前面文章里描述的基本相同，action可以将这些属性自动关联到GET方法传输的参数。所以在excute方法里直接调用：

User user = userService.getUser(username);

这里的username直接获取到视图层传输过来的username参数。为了响应AJAX请求，把数据封装到json对象是一个不错的选择：

        Json json=new Json();
        if(user!=null&&user.getPassword().equals(password))
        {
            json.add("answer", true);
            json.add("msghead", messageSource.getMessage("messageAdvice", null,Locale.CHINA));
            json.add("msg", messageSource.getMessage("loginSuccess", null,Locale.CHINA));//"登录成功"
        }
        else
        {
            json.add("answer", false);
            json.add("msghead", messageSource.getMessage("ErrorAdvice", null,Locale.CHINA));
            json.add("msg", messageSource.getMessage("pswError", null,Locale.CHINA));
        }
        message=json.toString();

这里的Json是自定义的，以下是add方法：

    public void add(String key, Object value) {
        if (text == null) {
            if (value instanceof String) {
                text = "{" + key + ":'" + value.toString() + "'}";
            } else {
                text = "{" + key + ":" + value.toString() + "}";
            }
        } else {
            text = text.substring(0, text.length() - 1);
            if (value instanceof String) {
                text += "," + key + ":'" + value.toString() + "'}";
            } else {
                text += "," + key + ":" + value.toString() + "}";
            }
        }
    }

在action中处理完毕后，可以在callback函数中取出响应值：

var jsonObj = Ext.util.JSON.decode(response.responseText);

然后再作处理：

if(jsonObj.answer==true){

.......

}

本示例的运行结果是：