ExtJS的使用_exjrs

ExtJS的定位是RIA即富客户端

使用ExtJS时需要解决如何与服务端通信的问题。由于ExtJS只是一个客户端的框架，和服务端技术没有关系，也就没有相应的服务端的适配层，因此客户端如果要用ExtJS，则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信：

数据的存储机制

简单的store

    }); 

            grid.getSelectionModel().selectFirstRow();  //GridPanel默认选中第一行  

Ext与服务器端的交互应用 

       

表单提交(submit)及加载(load)

 

Ext.onReady(function(){
     var f=new Ext.form.FormPanel({
         renderTo:“hello”,
          title:“用户信息录入框”,
            height:200,
            width:300,
            labelWidth:60,
            labelAlign:“right”,
            frame:true,
            defaults:{xtype:“textfield”,width:180},
      items:[
           {name:“username”,fieldLabel:“姓名”},
           {name:“password”,fieldLabel:“密码    ",inputType:"password"},
           {name:"email",fieldLabel:"电子邮件"},
           {xtype:"textarea",name:"intro",fieldLabel:"简介"}
          ],
     buttons:[{text:"提交"},{text:"取消"}]  
      })
});

f.form.submit({

  url:"server.js",
 waitTitle:"请稍候",

  waitMsg:"正在提交表单数据，请稍候。。。。。。“

});

调用submit方法后，默认服务器端需要返回一个JSON数据对象，该对象包含两个属性，success的值是布尔值true或false，如果success的值为true，则表示服务器端处理成功，否则表示失败；而errors的值是一个对象，对象中每一个属性表示错误的字段名称，属性值为错误描述。
　　比如，我们有服务器端验证，下面的返回结果表示当表单提交处理出错时给客户端返回的数据。
server.js文件中的内容如下： 

Ext.Ajax.rquest ( [Object options] ) : Number

例（ajax.htm）

Ext.onReady(function(){

        function successFn(response,options){

                var obj=Ext.decode(response.responseText) ;//把JSON数据解析成javascript对象可以直接使用Ext.decode方法  

alert(obj.username);

        }

//通过该对象的responseText或responseXML等属性来得到从服务器端返回的数据信息。

         function failureFn(response,options){

            alert('请求失败了');

         }

           Ext.Ajax.request({

               url: 'ls.js',

               success: successFn,

               failure: failureFn, 

               params: { foo: 'bar' }

            });

      });

:EXT的ajax提交

Ext.Ajax.request({
    //请求地址
   url:'login.do',
   //提交参数组
   params: {
       LoginName:Ext.get('LoginName').dom.value,
       LoginPassword:Ext.get('LoginPassword').dom.value
    },
   //成功时回调
   success:function(response, options) {
       //获取响应的json字符串
       varresponseArray = Ext.util.JSON.decode(response.responseText);
        if(responseArray.success==true){
           Ext.Msg.alert('恭喜','您已成功登录！');
        }else{
           Ext.Msg.alert('失败','登录失败，请重新登录');
        }
    }
});