Sealyu

          --- 博客已遷移至: http://www.sealyu.com/blog

            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks

          Ext.data專題一:Ext.data簡介

          Ext.data在命名空間中定義了一系列store、reader和proxy。

          Grid和ComboxBox都是以Ext.data為媒介獲取數據的,它包含異步加載、類型轉換、分頁等功能。

          Ext.data默認支持Array、JSON、XML等數據格式,可以通過 Memory、HTTP、ScriptTag等方式獲得這些格式的數據。如果要實現新的協(xié)議和新的數據結構,只需要擴展reader和proxy即可。 DWRProxy就實現了自身的proxy和reader,讓EXT可以直接從DWR獲得數據

          Ext.data專題二:Ext.data.Connection

          Ext.data.Connection 是對Ext.lib.Ajax的封裝,它提供了配置使用Ajax的通用方式,它在內部通過Ext.lib.Ajax實現與后臺的異步調用。與底層的 Ext.lib.Ajax相比,Ext.data. Connection提供了更簡潔的配置方式,使用起來更方便。

          Ext.data.Connection 主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中執(zhí)行與后臺交互的任務,它會從指定的URL獲得數 據,并把后臺返回的數據交給HttpProxy或ScriptTagProxy處理,Ext.data.Connection的使用方式如代碼清單


          var conn = new Ext.data.Connection({

              autoAbort: false,

              defaultHeaders: {

                  referer: 'http://localhost:8080/'

              },

              disableCaching : false,

              extraParams : {

                  name: 'name'

              },

              method : 'GET',

              timeout : 300,

              url : '01-01.txt'


          });

          在使用 Ext.data.Connection之前,都要像上面這樣創(chuàng)建一個新的Ext.Connection實例。我們可以在構造方法里配置對應的參數,比如 autoAbort表示鏈接是否會自動斷開、default- Headers參數表示請求的默認首部信息、disableCaching參數表示請求是否會禁用緩存、extraParams參數代表請求的額外參數、 method參數表示請求方法、timeout參數表示連接的超時時間、url參數表示請求訪問的網址等。

          在創(chuàng)建了conn之后,可以調用request()函數發(fā)送請求,處理返回的結果,如下面的代碼所示


          Ext.data專題三:Ext.data.Record

          Ext.data.Record就是一個設定了內部數據類型的對象,它是Ext.data.Store的最基本組成部分。如果把Ext.data.Store看作是一張二維表,那么它的每一行就對應一個Ext.data. Record實例。

          Ext.data.Record的主要功能是保存數據,并且在內部數據發(fā)生改變時記錄修改的狀態(tài),它還可以保留修改之前的原始值。

          我們使用Ext.data.Record時通常都是由create()函數開始,首先用create()函數創(chuàng)建一個自定義的Record類型,如下面的代碼所示。

          var PersonRecord = Ext.data.Record.create([

              {name: 'name', type: 'string'},

              {name: 'sex', type: 'int'}

          ]);

          PersonRecord就是我們定義的新類型,包含字符串類型的name和整數類型的sex兩個屬性,然后我們使用new關鍵字創(chuàng)建PersonRecord的實例,如下面的代碼所示。

          var boy = new PersonRecord({

              name: 'boy',

              sex: 0

          });

          創(chuàng)建對象時,可以直接通過構造方法為對象賦予初始值,將'boy'賦值給name,0賦值給sex。

          現在,我們得到了PersonRecord的實例boy,如何才能得到它的屬性呢?以下三種方式都可以獲得boy中name屬性的數據,如下面的代碼所示。

          alert(boy.data.name);

          alert(boy.data['name']);

          alert(boy.get('name'));

          這里涉及 Ext.data.Record的data屬性,這是定義在Ext.data.Record中的一個公共屬性,用于保存當前record對象的所有數據。 它是一個JSON對象,可以直接從它里面獲得需要的數據??梢酝ㄟ^Ext.data.Record的get()函數方便地從data屬性中獲得指定的屬性 值。

          如果我們需要修改boy中的數據,請不要使用以下方式直接操作data,如下面的代碼所示。

              boy.data.name = 'boy name';

              boy.data['name'] = 'boy name';

          而應該使用set()函數,如下面的代碼所示。

              boy.set('name', 'body name');

          set()函數會判斷屬性值是否發(fā)生了改變,如果改變了,就要將當前對象的dirty屬性設置為true,并將修改之前的原始值放入modified對象中,供其他函數使用。如果直接操作data中的值,record就無法記錄屬性數據的修改情況。

          Record的屬性數據被修改后,我們可以執(zhí)行如下幾種操作。

          q   commit()(提交):這個函數的效果是設置dirty為false,并刪除modified中保存的原始數據。

          q   reject()(撤銷):這個函數的效果是將data中已經修改了的屬性值都恢復成modified中保存的原始數據,然后設置dirty為false,并刪除保存原始數據的modified對象。

          q   getChanges()獲得修改的部分:這個函數會把data中經過修改的屬性和數據放在一個JSON對象里并返回。例如上例中,getChanges()返回的結果是{name:’body name’}。

          q   我們還可以調用isModified()判斷當前record中的數據是否被修改。

                Ext.data.Record還提供了用于復制record實例的函數copy()。

          var copyBoy = boy.copy();

          這樣我們就得到了boy的一個副本,它里面包含了boy的data數據,但copy()函數不會復制dirty和modified等額外的屬性值。


          Ext.data專題四:Ext.data.Store

          Ext.data.Store是EXT中用來進行數據交換和數據交互的標準中間件,無論是Grid還是ComboBox,都是通過它實現數據讀取、類型轉換、排序分頁和搜索等操作的。

          Ext.data.Store中有一個Ext.data.Record數組,所有數據都存放在這些Ext.data. Record實例中,為后面的讀取和修改操作做準備。

          一、Ext.data.Store基本應用

          在使用之前,首先要創(chuàng)建一個Ext.data.Store的實例,如下面的代碼所示。

          var data = [

              ['boy', 0],

              ['girl', 1]

          ];

          var store = new Ext.data.Store({

              proxy: new Ext.data.MemoryProxy(data),

              reader: new Ext.data.ArrayReader({}, PersonRecord)

          });

          store.load();

          每個store最少需要兩個組件的支持,分別是proxy和reader,proxy用于從某個途徑讀取原始數據,reader用于將原始數據轉換成Record實例。

          這里我們使用的是 Ext.data.MemoryProxy和Ext.data.ArrayReader,將data數組中的數據轉換成對應的幾個 PersonRecord實例,然后放入store中。store創(chuàng)建完畢之后,執(zhí)行store.load()實現這個轉換過程。

          經過轉換之后,store里的數據就可以提供給Grid或ComboBox使用了,這就是Ext.data. Store的最基本用法。

          二、Ext.data.Store對數據進行排序

          Ext.data.Store提供了一系列屬性和函數,利用它們對數據進行排序操作。

          可以在創(chuàng)建Ext.data.Store時使用sortInfo參數指定排序的字段和排序方式,如下面的代碼所示。

          var store = new Ext.data.Store({

              proxy: new Ext.data.MemoryProxy(data),

              reader: new Ext.data.ArrayReader({}, PersonRecord),

              sortInfo: {field: 'name', direction: 'DESC'}

          });

          這樣,在store加載數據之后,就會自動根據name字段進行降序排列。對store使用store.setDefaultSort('name','DESC');也會達到同樣效果。

          也可以在任何時候調用sort()函數,比如store.sort('name', 'DESC');,對store中的數據進行排序。

          如果我們希望獲得store的排序信息,可以調用getSortState()函數,返回的是類似{field: "name", direction: " DESC"}的JSON對象。

          與排序相關的參數還有 remoteSort,這個參數是用來實現后臺排序功能的。當設置為remoteSort:true時,store會在向后臺請求數據時自動加入sort 和dir兩個參數,分別對應排序的字段和排序的方式,由后臺獲取并處理這兩個參數,在后臺對所需數據進行排序操作。remoteSort:true也會導 致每次執(zhí)行sort()時都要去后臺重新加載數據,而不能只對本地數據進行排序。

          三、Ext.data.Store加載及顯示數據

          store創(chuàng)建好后,需要調用load()函數加載數據,加載成功后才能對store中的數據進行操作。load()調用的完整過程如下面的代碼所示。

          store.load({

              params: {start:0,limit:20},

              callback: function(records, options, success){

                  Ext.Msg.alert('info', '加載完畢');

              },

              scope: store,

              add: true

          });

            params是在store加載時發(fā)送的附加參數。

            callback是加載完畢時執(zhí)行的回調函數,它包含3個參數:records參數表示獲得的數據,options表示執(zhí)行l(wèi)oad()時傳遞的參數,success表示是否加載成功。

          Scope用來指定回調函數執(zhí)行時的作用域。

            Add為true時,load()得到的數據會添加在原來的store數據的末尾,否則會先清除之前的數據,再將得到的數據添加到store中。

          一般來說,為了對store中的數據進行初始化,load()函數只需要執(zhí)行一次。如果用params參數指定了需要使用的參數,以后再次執(zhí)行reload()重新加載數據時,store會自動使用上次load()中包含的params參數內容。

          如果有一些需要固定傳遞的參數,也可以使用baseParams參數執(zhí)行,它是一個JSON對象,里面的數據會作為參數發(fā)送給后臺處理,如下面的代碼所示。

          store.baseParams.start = 0;

          store.baseParams.limit = 20;

          為store加載數據之后,有時不需要把所有數據都顯示出來,這時可以使用函數filter和filterBy對store中的數據進行過濾,只顯示符合條件的部分,如下面的代碼所示。

          filter( String field, String/RegExp value, [Boolean anyMatch],
          [Boolean caseSensitive] ) : void

          filter()函數的用法與之前談到的find()相似,如下面的代碼所示。

          store.filter('name', 'boy');

          對應的filterBy()與findBy()類似,也可以在自定義的函數中實現各種復雜判斷,如下面的代碼所示。

          store.filterBy(function(record) {

              return record.get('name') == 'girl' && record.get('sex') == 1;

          });

          如果想取消過濾并顯示所有數據,那么可以調用clearFilter()函數,如下面的代碼所示。

          store.clearFilter();

          如果想知道store上是否設置了過濾器,可以通過isFiltered()函數進行判斷。

          四、Ext.data.Store其他功能

          除了上面提到的數據獲取、排序、更新、顯示等功能外,store還提供了其他一些功能函數。

          collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array

          collect函數獲得 指定的dataIndex對應的那一列的數據,當allowNull參數為true時,返回的結果中可能會包含null、undefined或空字符串, 否則collect函數會自動將這些空數據過濾掉。當bypassFilter參數為true時,collect的結果不會受查詢條件的影響,無論查詢條 件是什么都會忽略掉,返回的信息是所有的數據,如下面的代碼所示。

          alert(store.collect('name'));

          這樣會獲得所有name列的值,示例中返回的是包含了'boy'和'girl'的數組。

          getTotalCount()用于在翻頁時獲得后臺傳遞過來的數據總數。如果沒有設置翻頁,get- TotalCount()的結果與getCount()相同,都是返回當前的數據總數,如下面的代碼所示。

          alert(store.getTotalCount());

          indexOf(Ext.data.Record record)和indexOfId(String id)函數根據record或record的id獲得record對應的行號,如下面的代碼所示。

          alert(store.indexOf(store.getAt(1)));

          alert(store.indexOfId(1001));

          loadData(object data, [Boolean append])從本地JavaScript變量中讀取數據,append為true時,將讀取的數據附加到原數據后,否則執(zhí)行整體更新,如下面的代碼所示。

          store.loadData(data, true);

          Sum(String property, Number start, Number end):Number用于計算某一個列從start到end的總和,如下面的代碼所示。

          alert(store.sum('sex'));

          Ext.data專題五:常用proxy之MemoryProxy

          MemoryProxy只能從JavaScript對象獲得數據,可以直接把數組,或JSON和XML格式的數據交給它處理,如下面的代碼所示。

          var proxy = new Ext.data.MemoryProxy([
              ['id1','name1','descn1'],
              ['id2','name2','descn2']
          ]);

          HttpProxy使用HTTP協(xié)議,通過Ajax去后臺取數據,構造它時需要設置url:'xxx.jsp'參數。這里的url可以替換成任何一個合法的網址,這樣HttpProxy才知道去哪里獲取數據,如下面的代碼所示。

          var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});               

          后臺需要返回EXT所需要的JSON格式的數據,下面的內容就是后臺使用JSP的一個范例,如下面的代碼所示。

          response.setContentType("application/x-json");

          Writer out = response.getWriter();

          out.print("[" +

                  "['id1','name1','descn1']" +

                  "['id2','name2','descn2']" +

              "]");               

          請注意,這里的HttpProxy不支持跨域,它只能從同一域中獲得數據。如果想跨域,請參考下面的ScriptTagProxy。

          常用proxy之ScriptTagProxy

          ScriptTagProxy的用法幾乎和HttpProxy一樣,如下面的代碼所示。

          var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});               

          從這里也看不出來它是如何支持跨域的,我們還需要在后臺進行相應的處理,如下面的代碼所示。

          String cb = request.getParameter("callback");

          response.setContentType("text/javascript");

          Writer out = response.getWriter();

          out.write(cb + "(");

          out.print("[" +

                  "['id1','name1','descn1']" +

                  "['id2','name2','descn2']" +

              "]");

          out.write(");");

          其中的關鍵就在于從請求中獲 得的callback參數,這個參數叫做回調函數。ScriptTag- Proxy會在當前的HTML頁面里添加一個<script type="text/javascript"src="xxx.jsp"> </script>標簽,然后把后臺返回的內容添加到這個標簽中,這樣就可以解決跨域訪問數據的問題。為了讓后臺返回的內容可以在動態(tài)生成的 標簽中運行,EXT會生成一個名為callback的回調函數,并把回調函數的名稱傳遞給后臺,由后臺生成callback(data)形式的響應內容, 然后返回給前臺自動運行。

          雖然上述處理過程比較難理解,但是我們只需要了解ScriptTagProxy的用法就足夠了。如果還想進一步了解ScriptTagProxy的運行過程,可以使用Firebug查看動態(tài)生成的HTML以及響應的JSON內容。

          最后我們來分析一下EXT的API文檔中提供的示例,這段后臺代碼會自動判斷請求的類型,返回支持ScriptTagProxy或HttpProxy的數據,如代碼清單10-2所示。

          代碼清單 在后臺同時支持HttpProxy和ScriptTagProxy

          boolean scriptTag = false;

          String cb = request.getParameter("callback");

          if (cb != null) {

              scriptTag = true;

              response.setContentType("text/javascript");

          } else {

              response.setContentType("application/x-json");

          }

          Writer out = response.getWriter();

          if (scriptTag) {

              out.write(cb + "(");

          }

          out.print(dataBlock.toJsonString());

          if (scriptTag) {

              out.write(");");

          }               

          代碼中通過判斷請求中是否包含callback參數來決定返回何種數據類型。如果包含,就返回ScriptTagProxy需要的數據;否則,就當作HttpProxy處理。

          posted on 2009-11-17 14:57 seal 閱讀(787) 評論(0)  編輯  收藏 所屬分類: EXTJS
          主站蜘蛛池模板: 定西市| 铜山县| 万荣县| 达拉特旗| 望奎县| 五寨县| 孟连| 天门市| 西平县| 井陉县| 洞头县| 嘉鱼县| 宜昌市| 柘城县| 汉源县| 静乐县| 巴彦县| 介休市| 海原县| 商都县| 周宁县| 台州市| 邯郸市| 山东| 筠连县| 宾阳县| 砀山县| 泸定县| 肥城市| 永嘉县| 南木林县| 淄博市| 巧家县| 方山县| 青神县| 宿迁市| 淮北市| 望江县| 建阳市| 蕲春县| 南康市|