extjs是一个优秀的javascript框架,因为自己不是美工,可是有些项目有需要,就开始学习extjs了。今天可以说是如了个门,大概了解了下ext的基本结构。
现在就遇到的问题记录下来,方便自己以后查看,也希望能帮的伤刚学习ext的人。
这里主要是ext在java中的运用。
下面是一个登陆的小例子,在这过程中遇到了一些问题,在结束时,我再把我的问题写出来。
例子 :
1.导入jsonplugin包
导入struts2-json-plugin-xxx.jar
2,配置struts.xml文件
<package name="login" namespace="/user" extends="json-default">//使用json
<action name="login" class="com.ext.action.LoginAction">
<result type="json">//是包返回值包装为json格式
<param name="excludeProperties">list</param>//这个是我为了测试不需要的属性时故意加上的,当不需要 //某个还回值 时可使用这种配置
</result>
</action>
</package>
说明:配置excludeProperties是因为用可能在注入或使用list等时json数据进入死循环,导致无返回结果,而不能再在js中正确
使用回调函数,
3,编写action
public class LoginAction extends ActionSupport {
private String username;
private String password;
private String message;
private boolean success;
private List list;
@Override
public String execute(){
if(this.getUsername().equals("liu")&&this.getPassword().equals("123")){
message = "你的用户名是:"+this.getUsername()+",密码是:"+this.getPassword();
this.success = true;
}else{
message = "对不起,你输入的用户名密码有误!请重新输入";
this.success = false;
}
return SUCCESS;
}
//省略了getter和setter方法
}
4,页面的js,把js放入jsp中即可,
Ext.onReady(function(){
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "under";
var login = new Ext.FormPanel({
baseCls:"x-plain",
height:100,
labelWidth:80,
defaultType:"textfield",
defaults:{width:150},
buttonAlign:"center",
items:[
{fieldLabel:"用户名",name:"username",allowBlank:false,blankText:"用户名不能为空"},
{fieldLabel:"密码",name:"password",allowBlank:false,blankText:"密码不能为空"}
],
buttons:[
{text:"确定",
type:"submit",
handler:function(){
if(login.form.isValid()){
Ext.MessageBox.show({
title:"请稍等",
msg:"正在加载.....",
progressText:"",
width:300,
progress:true,
closable:false,
animEl:"loding"
});
var f = function(v) {
return function(){
var i = v / 11;
Ext.MessageBox.updateProgress(i, '');
}
}
for(var i = 1; i < 13; i++) {
setTimeout(f(i), i * 150);
}
//提交到服务器操作
login.form.doAction("submit",{
url:"user/login.action",
method:"post",
params:"",
success:function(form, action){
Ext.Msg.alert("登录成功!",action.result.message);
},
failure:function(form, action){
Ext.Msg.alert('登陆失败', action.result.message);
}
});
}
}
},
{text:"取消"}
]
}
);
var loginwin = new Ext.Window({
title:"登陆框",
layout:"fit",
width:300,
height:160,
collapsible:true,
closable:false,
plain:true,
items:login
});
loginwin.show();
});
5,测试
总结:在使用时我遇到了界面一直等待的情况,主要是由于struts版本和json的版本问题,还有就是有些spring的接口注入属性和list,set等属性,把这些属性在配置文件中用excludeProperties注掉,同时保证版本兼容,即可解决。