精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

In the lat two articles, I introduce how to use SSH frameworks in Netbeans, and this article will introduce how to use EXT JS with them. The basic way to implement is using AJAX Request of EXT JS to connect with Struts Actions.

EXT JS is a javascript library, and it provide powerful rich client experience for web applications. As EXT JS is a client side technoloy, it is hard to integrate with server side technologies as Java. Here, I suggest a method that implement this with AJAX Request of EXT JS.

First, you must copy the library of EXT JS2.0 to the Web pages folder and begin your coding. If you want to use Struts tags in EXT JS, e.g. internationalization, you must write your javascript in the JSP web pages. Don't write scripts in a lonely js file because it is a server side file and clients can not access it.

For example:

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'
                });

and you can access the "title" resource from a resource file.

Then, you can define a layer which will not display in the JSP file to place the login form and use the EXT JS frame to encapsulate it:

<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>
       
        <!--Outputs-->
        <div id="divMessageTip"></div>

 And use it in a EXT JS frame:

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

The key is how to establish an AJAX connection and transform data to the action:

var conn = new Ext.data.Connection();
                // Send asynchronous request
                conn.request({
                    // Request URL
                    url: 'login2.action',
                    method: 'GET',
                    params:'username='+document.getElementById('name').value+'&password='+document.getElementById('pwd').value,
                    // call back function
                    callback: callback
                });

Notice the red code, we use document element to get value from Struts tags, and set the parameters to the url. Also, notice that the url must content ".action", or EXT JS will never find the URL.  Again,  have a look at the parameters in LoginAction(as mentioned in the last article):

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

parameter checkcode is used to mark the HTTP State. And we can use these parameters in the excute() method:

User user = userService.getUser(username);

and parameter "username" will receive a value from Login.jsp. In order to response to the AJAX request, encapsulate the data into a JSON object is a good choice:

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();

you can write the JSON operations yourself or find one in the internet, I wrote it myself, as the add() method:

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() + "}";
            }
        }
    }

After getting the response data, we can get the value in the callback function:

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

and then:

if(jsonObj.answer==true){

.......

}

Below is the snap shot of the demo, If you need the code, please contact me: