ExtJS的使用

ExtJS与服务端通信

     

ExtJS的定位是RIA即富客户端

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

Ext.Ajax.request做普通的异步请求，服务端可以根据实际情况返回JSON形式数据或者HTML片段

Ext.tree.TreeLoader加载树形结构，服务端必须返回JSON形式数据，而且要符合Ext.tree.TreeNode的配置要求，否则自己做转换

Ext.data.Store及其派生类 加载表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据，如果没有特殊要求，推荐返回JSON格式的数据

Ext.Element.update局部更新，这个方法最终还是要调用Ext.Ajax.request方法，之所以把它单独列出来，是因为这种方式比较容易被忽视，但是在某些情况下还是挺有用的，比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新，如果使用这种方式，那么服务端只能相应的返回HTML片段了

数据的存储机制

   

EXT数据存储概念      Ext.data（Package）包下

Store :数据存储器（包括 ArrayStore, DirectStore, GroupingStore, JsonStore, XmlStore）

read:数据解析用于读取数据

（ArrayReader ,XmlReader）

proxy:代理数据源，提供原始数据 （ DirectProxy, HttpProxy, MemoryProxy, ScriptTagProxy）

record:store中的每条记录流行的中间数据格式xml json

write写数据（ JsonWriter, XmlWriter）

connection此类封装了一个页面到当前域的连接，以响应（来自配置文件中的url或请求时指定的url）请求 

简单的store

   

var store = newExt.data.ArrayStore({

//store configs如果有值传入，那么store的load会自动调用

autoDestroy: true,

storeId: 'myStore',

//reader configs

idIndex: 0,

fields: [

'company',

 {name: 'price', type: 'float'},

 {name: 'change', type: 'float'},

 {name: 'pctChange', type: 'float'},

 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

 ]

}); 

n /** EXTjs 基础

n Ext.get ();        根据 id 得到该对象  

n Ext.select ();     根据标签得到该对象  

n Ext.onReady ();    页面加载会自动执行该方法  

n * /   

n Ext.onReady (function()   {   

n      /**  

n      var   myDiv   =   Ext.get (' myDiv ');  

n      Ext.select ('p').highlight();  

n      myDiv.highlight ();    

n      myDiv.addClass ('red');      

n     myDiv.center ();           //   Center   the   element   in   the   viewport  

n      myDiv.setOpacity (.25);    //   透明度

n      * /   

n Var s=fun( tt ){}

n      // Ext.get ().on( 事件名，执行的函数 );   

n      Ext.get (' myButton ').on('click',   Ext.get (' myButton ').   

n

n      /**  

n      Ext.select ('p').on('click',   function()   {  

n          alert("You   clicked   a   paragraph");  

n      });

n      // paragraphClicked 函数方法名  

n      var   paragraphClicked   =   function()   {  

n          alert("You   clicked   a   paragraph");  

n      }  

n      Ext.select ('p').on('click',   paragraphClicked );*/    

n      var   paragraphClicked   =   function(e)   {   

n          var   paragraph   =   Ext.get ( e.target );    // e.target 得到事件源对象   

n          paragraph.highlight ();   

案例GridPanel          Ext.MessageBox.show ({   

n   

Ext.onReady(function(){  

        var myData = [      //数据源。和myReader格式对应  

            ['Apple',29.89,0.24,0.81,'9/112:00am'],  

            ['Ext',83.81,0.28,0.34,'9/1212:00am'],  

            ['Google',71.72,0.02,0.03,'10/112:00am'],  

            ['Microsoft',52.55,0.01,0.02,'7/412:00am'],  

            ['Yahoo!',29.01,0.42,1.47,'5/2212:00am'],

            ['科大奥锐!',29.01,0.42,1.47,'5/2212:00am'] 

        ];  

        

        var myReader = newExt.data.ArrayReader({},[   //读取数据源。和myData一一对应  

            {name:'company'},  

            {name: 'price', type:'float'},  

            {name: 'change', type:'float'},  

            {name: 'pctChange', type:'float'},  

            {name: 'lastChange', type: 'date',dateFormat: 'n/j h:ia'}  

        ]);  

                 title: 'Paragraph Clicked',  

            msg: paragraph.dom.innerHTML,   

            width:400,  

            buttons: Ext.MessageBox.OK,   

            animEl: paragraph  

        });   

    }   

    Ext.select('p').on('click', paragraphClicked);

     });    event:s ;

   

var grid = newExt.grid.GridPanel({  

            store: new Ext.data.Store({     //数据装配  

                data: myData,  

                reader: myReader  

           }),  

            columns: [      //header:显示的标题；width:该列的宽度；sortable:可否排序；dataIndex:数据索引（从data中取）  

                {header: '公司名称',width: 120, sortable: true, dataIndex: 'company'},  

                {header: '价格',width: 90, sortable: true, dataIndex: 'price'},  

                {header: '调价',width: 90, sortable: true, dataIndex: 'change'},  

                {header: '%调幅',width: 90, sortable: true, dataIndex: 'pctChange'},  

                {header: '最后更新',width: 120, sortable: true,renderer:Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'}  

            ],  

            viewConfig: {  

                forceFit: true      //强制适合GridPanel（GridPanel的大小不会改变）。true:没有滚动条；fasle:有滚动条  

            },  

           renderTo: 'content',    //显示位置（div中的id=“content”）  

            title: '公司数据预览',//标题  

            width: 500,     //GridPanel的宽度

            height:300,

            frame: true     //GridPanel的边框  

        });  

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

Ext与服务器端的交互应用 

       

1.包含表单FormPanel的处理(提交、加载）

(例子：biaodan.htm，load.htm)

2.控件交互（tree.htm，xml方式取值）

3.用户发起的Ajax请求Ext.Ajax.request方法

表单提交(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:"取消"}]  
      })
});

要提交该表单，直接调用FormPanel下面form对象的submit方法：

f.form.submit({

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

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

});

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

server.js文件中的内容如下： {
     success: false,
      errors: {
         username: "姓名不能为空",
         times: "迟到次数必须为数字!"
     }
 }

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('失败','登录失败，请重新登录');
        }
    }
});

request方法可以定义Ajax请求的一些属性。参数options是一个对象，options中各个属性及含义如下示：

url String 指定要请求的服务器端url，默认值为Ajax对象中配置的URL参数值。

params Object/String/Function 指定要传递的参数，可以是一个包含参数名称及值的对象，也可以是name=xx&birthday=1978-1-1类似的url编码字符串，或者是一个能返回上述两种内容的函数。

method String 指定发送Ajax请求使用的method，可以是GET或POST方式。默认情况下，如果请求中没有传递任何参数则使用GET，否则使用POST。

callback Function 指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。传递给回调函数的参数有三个，第一个options表示执行request方法时的参数，第二个success表示请求是否成功，第三个参数response表示用来执行Ajax请求的XMLHttpRequest对象。　　

disableCaching Boolean 是否禁止cache。

headers Object 指定请求的Header信息。

success Function 指当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。

failure Function 指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。

scope Object 指定回调函数的作用域，默认为浏览器window。

form Object/String 指定要提交的表单id或表单数据对象。

isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。

xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。

jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。

控件

 

1.面板

varpanel = new Ext.Panel({

    id:'helloworld',

    title:'helloworld title',

    width:200,

    height:300

});

显示面板在id="hello"的div中

panel.render("hello");

2.框架

varviewPort =new Ext.Viewport({

   id:'desk',

    layout:'border',

   items:[{region:'north',height:80},{region:'west',width:200},{region:'center'}]

});

控件实在是太多了代码也太多了 写不下  请参考  ext例子

EXT的学习的网址和博客

http://www.dojochina.com/dojobchina

http://www.myext.cn/EXT之家

http://www.ajaxjs.com/基于web表示层的解决方案

http://www.17ext.com/   一起EXT

http://www.extjs.com/官方

http://www.extjs.com/products/extcore/docs/ API文档

http://www.vifir.com/extjs/专题

http://blog.csdn.net/torycatkin/category/363125.aspx中文参考