开始学习ext-记下自己学习过程中的点点滴滴01

        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注掉，同时保证版本兼容，即可解决。