隨筆 - 9  文章 - 1  trackbacks - 0
          <2015年4月>
          2930311234
          567891011
          12131415161718
          19202122232425
          262728293012
          3456789

          不以薪水論英雄,英雄從不爭(zhēng)薪水。

          常用鏈接

          留言簿

          隨筆檔案

          搜索

          •  

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          轉(zhuǎn)載:http://www.aygfsteel.com/liubijin/archive/2010/05/04/320008.html

          1、Record

            首先需要明確是,ExtJS中有一個(gè)名為Record的類,表格等控件中使用的數(shù)據(jù)是存放在Record對(duì)象中,一個(gè)Record可以理解為關(guān)系數(shù)據(jù)表中的一行,也可以稱為記錄。Record對(duì)象中即包含了記錄(行中各列)的定義信息(也就是該記錄包含哪些字段,每一個(gè)字段的數(shù)據(jù)類型等),同時(shí)又包含了記錄具體的數(shù)據(jù)信息(也就是各個(gè)字段的值)。

            我們來看直接使用Record的代碼

          Ext.onReady(function(){
                   
          var MyRecord = Ext.data.Record.create([
                       {name: 'title'},
                       {name: 'username', mapping: 'author'},
                       {name: 'loginTimes', type: '
          int'},
                       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
                             ]);
                   
          var r=new MyRecord({
                             title:
          "日志標(biāo)題",
                             username:
          "easyjf",
                             loginTimes:
          100,
                             loginTime:
          new Date()
                   });       
                   alert(MyRecord.getField(
          "username").mapping);
                   alert(MyRecord.getField(
          "lastLoginTime").type);
                   alert(r.data.username);
                   alert(r.get(
          "loginTimes"));
           });



             首先使用Record的create方法創(chuàng)建一個(gè)記錄集MyRecord,MyRecord其實(shí)是一個(gè)類,該類包含了記錄集的定義信息,可以通過MyRecord來創(chuàng)建包含字段值的Record對(duì)象。在上面的代碼中,最后的幾條語(yǔ)句用來輸出記錄集的相關(guān)信息,MyRecord.getField("username")可以得到記錄中username列的字段信息,r.get("loginTimes")可以得到記錄loginTimes字段的值,而r.data.username同樣能得到記錄集中username字段的值。
            對(duì)Record有了一定的了解,那么要操作記錄集中的數(shù)據(jù)就非常簡(jiǎn)單了,比如r.set(name,value)可以設(shè)置記錄中某指定字段的值,r. dirty可以得到當(dāng)前記錄是否有字段的值被更改過等等。

          2Store

          Store可以理解為數(shù)據(jù)存儲(chǔ)器,可以理解為客戶端的小型數(shù)據(jù)表,提供緩存等功能。在ExtJS中,GridPanel、ComboBox、DataView等控件一般直接與Store打交道,直接通過store來獲得控件中需要展現(xiàn)的數(shù)據(jù)等。一個(gè)Store包含多個(gè)Record,同時(shí)Store又包含了數(shù)據(jù)來源,數(shù)據(jù)解析器等相關(guān)信息,Store通過調(diào)用具體的數(shù)據(jù)解析器(DataReader)來解析指定類型或格式的數(shù)據(jù)(DataProxy),并轉(zhuǎn)換成記錄集的形式保存在Store中,作為其它控件的數(shù)據(jù)輸入。
            數(shù)據(jù)存儲(chǔ)器由Ext.data.Store類定義,一個(gè)完整的數(shù)據(jù)存儲(chǔ)器要知道數(shù)據(jù)源(DataProxy)及數(shù)據(jù)解析方式(DataReader)才能工作,在Ext.data.Store類中數(shù)據(jù)源由proxy配置屬性定義、數(shù)據(jù)解析(讀取)器由reader配置屬性定義,一個(gè)較為按部就班創(chuàng)建Store的代碼如下:

          var MyRecord = Ext.data.Record.create([
                       {name: 'title'},
                       {name: 'username', mapping: 'author'},
                       {name: 'loginTimes', type: 'int'},
                       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
                             ]);
                   var dataProxy=new Ext.data.HttpProxy({url:"link.ejf"});
                   var theReader=new Ext.data.JsonReader({
                       totalProperty: "results", 
                       root: "rows",              
                       id: "id"                   
                             },MyRecord);
                   var store=new Ext.data.Store({           
                                       proxy:dataProxy,
                                       reader:theReader
                             });
                   store.load();

            當(dāng)然,這樣的難免代碼較多,Store中本身提供了一些快捷創(chuàng)建Store的方式,比如上面的示例代碼中可以不用先創(chuàng)建一個(gè)HttpProxy,只需要在創(chuàng)建Store的時(shí)候指定一個(gè)url配置參數(shù),就會(huì)自動(dòng)使用HttpProxy來加載參數(shù)。比如,上面的代碼可以簡(jiǎn)化成:

           

          var MyRecord = Ext.data.Record.create([
                       {name: 'title'},
                       {name: 'username', mapping: 'author'},
                       {name: 'loginTimes', type: 'int'},
                       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
                             ]);
                   var theReader=new Ext.data.JsonReader({
                       totalProperty: "results", 
                       root: "rows",              
                       id: "id"                   
                             },MyRecord);
                   var store=new Ext.data.Store({
                   url:"link.ejf",
                                       proxy:dataProxy,
                                       reader:theReader
                             });
                   store.load();

            雖然不再需要手動(dòng)創(chuàng)建HttpProxy了,但是仍然需要?jiǎng)?chuàng)建DataReader等,畢竟還是復(fù)雜,ExtJS進(jìn)一步把這種常用的數(shù)據(jù)存儲(chǔ)器進(jìn)行了封裝,在Store類的基礎(chǔ)上提供了SimpleStore、SimpleStore、GroupingStore等,直接使用SimpleStore,則上面的代碼可以進(jìn)一步簡(jiǎn)化成下面的內(nèi)容:

          var store=new Ext.data.JSonStore({               
                             url:"link.ejf?cmd=list",
                             totalProperty: "results", 
                             root: "rows",
                             fields:['title',   {name: 'username', mapping: 'author'},
                       {name: 'loginTimes', type: 'int'},
                       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
                             ]         
                   });
                   store.load();

           

          3DataReader

          DataReader表示數(shù)據(jù)讀取器,也就是數(shù)據(jù)解析器,其負(fù)責(zé)把從服務(wù)器或者內(nèi)存數(shù)組、xml文檔中獲得的雜亂信息轉(zhuǎn)換成ExtJS中的記錄集Record數(shù)據(jù)對(duì)象,并存儲(chǔ)到Store里面的記錄集數(shù)組中。
            數(shù)據(jù)解析器的基類由Ext.data.DataReader定義,其它具體的數(shù)據(jù)解析器都是該類的子類,ExtJS中提供了讀取二維數(shù)組、JSon數(shù)據(jù)及Xml文檔的三種數(shù)據(jù)解析器,分別用于把內(nèi)存中的二級(jí)數(shù)組、JSON格式的數(shù)據(jù)及XML文檔信息解析成記錄集。下面簡(jiǎn)單的介紹:
            1)ArrayReader
          Ext.data.ArrayReader-數(shù)組解析器,用于讀取二維數(shù)組中的信息,并轉(zhuǎn)換成記錄集Record對(duì)象。首先看下面的代碼:

          var MyRecord = Ext.data.Record.create([
                       {name: 'title', mapping:1},
                       {name: 'username', mapping:2},
                       {name: 'loginTimes', type:3} 
                             ]);
                   var myReader = new Ext.data.ArrayReader({
                       id: 0           
                   }, MyRecord);

            這里定義的myReader可以讀取下面的二維數(shù)組:

          [ [1, '測(cè)試', '小王',3], [2, '新年好', 'williamraym',13] ]

            2JsonReader
            Ext.data.JsonReaderJson數(shù)據(jù)解析器,用于讀取JSON格式的數(shù)據(jù)信息,并轉(zhuǎn)換成記錄集Record對(duì)象。看下面使用JsonReader的代碼:

          var MyRecord = Ext.data.Record.create([
                       {name: 'title'},
                       {name: 'username', mapping: 'author'},
                       {name: 'loginTimes', type: 'int'}
                             ]);
                   var myReader = new Ext.data.JsonReader({
                              totalProperty: "results", 
                   root: "rows",       
                    id: "id" 
                   }, MyRecord);

            這里的JsonReader可以解析下面的JSON數(shù)據(jù):

          { 'results': 2, 'rows': [
              { id: 1, title: '測(cè)試', author: '小王', loginTimes: 3 },
              { id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
          }

            JSonReader還有比較特殊的用法,就是可以把Store中記錄集的配置信息存放直接保存在從服務(wù)器端返回的JSON數(shù)據(jù)中,比如下面的例子:

          var myReader = new Ext.data.JsonReader();

           

            這一個(gè)不帶任何參數(shù)的myReader,可以處理從服務(wù)器端返回的下面JSON數(shù)據(jù):

          {
           'metaData': {
              totalProperty: 'results',
              root: 'rows',
              id: 'id',
              fields: [
                 {name: 'title'},
                       {name: 'username', mapping: 'author'},
                   {name: 'loginTimes', type: 'int'} ]
             },
           'results': 2, 'rows': [
              { id: 1, title: '測(cè)試', author: '小王', loginTimes: 3 },
              { id: 2, title: '新年好', author: 'williamraym', loginTimes:13}]
          }

            3)XmlReader
          Ext.data.XmlReader-XML文檔數(shù)據(jù)解析器,用于把XML文檔數(shù)據(jù)轉(zhuǎn)換成記錄集Record對(duì)象。看下面的代碼:

          var MyRecord = Ext.data.Record.create([
                       {name: 'title'},
                       {name: 'username', mapping: 'author'},
                       {name: 'loginTimes', type: 'int'}
                             ]);
                   var myReader = new Ext.data.XmlReader({
                              totalRecords: "results", 
                   record: "rows",       
                              id: "id" 
                   }, MyRecord);

            上面的myReader能夠解析下面的xml文檔信息:

          <topics>
           <results>2</results>
           <row>
             <id>1</id>
             <title>
          測(cè)試</ title >
             <author>小王
          </ author >
           <loginTimes>3</ loginTimes >
           </row>
           <row>
             <id>2</id>
             <title>新年好
          </ title >
             <author> williamraym </ author >
           <loginTimes>13</ loginTimes >
           </row>
          </topics>
          posted on 2011-04-14 11:20 稻草 閱讀(9261) 評(píng)論(1)  編輯  收藏

          FeedBack:
          # re: ExtJS Record 與 Store 說明 2015-04-13 16:24 

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 华池县| 牡丹江市| 沾化县| 潮安县| 青铜峡市| 西和县| 义马市| 靖宇县| 凤凰县| 启东市| 临武县| 勃利县| 岳阳市| 资中县| 城口县| 航空| 读书| 铜川市| 南江县| 汽车| 阿勒泰市| 望奎县| 关岭| 荔波县| 奉节县| 青浦区| 镇坪县| 许昌县| 博野县| 鄂州市| 高尔夫| 上杭县| 肃北| 东宁县| 永兴县| 余庆县| 奎屯市| 山东省| 兴安县| 饶平县| 茂名市|