【正文】 // ArrayReader var ds = new ({ proxy: new (data), reader: new ({}, [ {name: ‘id’,mapping: 0}, {name: ‘sex’,mapping: 1}, {name: ‘name’,mapping: 2}, {name: ‘des’,mapping: 3} ]) })。 ()。//初始化數(shù)據(jù) ds要對(duì)應(yīng)兩個(gè)部分： proxy和 reader。 proxy告訴我們從哪里獲得數(shù)據(jù)， reader告訴我們?nèi)绾谓馕鲞@個(gè)數(shù)據(jù)。 現(xiàn)在用的是 ，它將內(nèi)存中的數(shù)據(jù) data作為參數(shù)傳遞。 解析數(shù)組，并丏告訴我們它會(huì)按照定義的規(guī)范進(jìn)行解析，每行按順序讀取四個(gè)數(shù)據(jù)，第一個(gè)叫 id，第二個(gè)叫sex，第三個(gè)叫 name，第四個(gè) des。 這些是跟 cm定義中的 dataIndex對(duì)應(yīng)的。這樣 cm就知道哪列應(yīng)該顯示那條數(shù)據(jù)了 。 mapping屬性用于標(biāo)記 data中的讀取后的數(shù)據(jù)不標(biāo)頭的映射關(guān)系，一般是丌用設(shè)置的。但如果我們想讓 sex的數(shù)據(jù)中 name欄中出現(xiàn)，可以設(shè)置 mapping值。即 sex的 mapping為 2,后者為 1。 記得要執(zhí)行一次 ()，對(duì)數(shù)據(jù)進(jìn)行初始化 。 如何在表格中添加 CheckBox呢？ var sm = new ()。 var cm = new ([ new (),//自勱行號(hào) sm,//添加的地方 {header:39。編號(hào) 39。,dataIndex:39。id39。}, {header:39。性別 39。,dataIndex:39。sex39。}, {header:39。名稱 39。,dataIndex:39。name39。}, {header:39。描述 39。,dataIndex:39。des39。} ])。 var grid = new ({ el: 39。grid339。, ds: ds, cm: cm, sm: sm,//添加的地方 title: 39。HelloWorld39。 })。 分頁工具欄 var grid = new ({ el: ?grid?, ds: ds, cm: cm, sm: sm, title: ?我的 Grid?, bbar: new ({ //在底部添加 pageSize: 10, store: ds, displayInfo: true, displayMsg: ‘顯示第 {0} 條到 {1} 條記錄，一共 {2} 條’ , emptyMsg: “沒有記錄” }), tbar: new ({ //在頂部添加 items:[ { id:?buttonA? ,text:“新增” ,handler: function(){ alert(“You clicked Button A”)。 } } , new ({}) ,{ id:?buttonB? ,text:“修改 ,handler: function(){ alert(You clicked Button B)。 } } , 39。? , { id:?buttonc? ,text:“刪除 } ] }) })。 ()。 Record 首先需要明確是， ExtJS 中有一個(gè)名為 Record 的類，表格等控件中使用的數(shù)據(jù)是存放在 Record 對(duì)象中，一個(gè) Record 可以理解為關(guān)系數(shù)據(jù)表中的一行 ，也可以稱為記錄。 Record 對(duì)象中即包含了記錄（行中各列）的定義信息（也就是該記錄包含哪些字段，每一個(gè)字段的數(shù)據(jù)類型等），同時(shí)又包含了記錄具體的數(shù)據(jù)信息（也就是各個(gè)字段的值）。 (function(){ var MyRecord = ([//使用 Record 的 create 方法創(chuàng)建一個(gè)記錄集MyRecord {name: 39。title39。}, {name: 39。username39。, mapping: 39。author39。}, {name: 39。loginTimes39。, type: 39。int39。}, {name: 39。lastLoginTime39。, mapping: 39。loginTime39。, type: 39。date39。} ])。 var r=new MyRecord({//可以通過 MyRecord 來創(chuàng)建包含字段值的 Record 對(duì)象 ( 模擬 record數(shù)據(jù) ) title:日志標(biāo)題 , username:easyjf, loginTimes:100, loginTime:new Date() })。 alert((username).mapping)。 alert((lastLoginTime).type)。 alert()。 alert((loginTimes))。 })。 Store 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ǔ)器由 類定義， 一個(gè)完整的數(shù)據(jù)存儲(chǔ)器要知道數(shù)據(jù)源 (DataProxy)及數(shù)據(jù)解析方式 (DataReader)才能工作 ，在 類中數(shù)據(jù)源由 proxy 配置屬性定義、數(shù)據(jù)解析（讀?。┢饔?reader 配置屬性定義，一個(gè)較為按部就班創(chuàng)建 Store 的代碼如下 var MyRecord = ([ {name: 39。title39。}, {name: 39。username39。, mapping: 39。author39。}, {name: 39。loginTimes39。, type: 39。int39。}, {name: 39。lastLoginTime39。, mapping: 39。loginTime39。, type: 39。date39。} ])。 var dataProxy=new ({url:“”})。 //創(chuàng)建數(shù)據(jù)來源 var theReader=new ({//創(chuàng)建 Json數(shù)據(jù)解析器 totalProperty: “results”, //總記錄數(shù) root: “rows”, //服務(wù)器返回的數(shù)據(jù) id: id },MyRecord)。 var store=new ({ proxy:dataProxy, //設(shè)定數(shù)據(jù)來源 reader:theReader //設(shè)定數(shù)據(jù)解析器 })。 ()。 當(dāng)然，這樣按部就班的寫難免代碼較多， Store 中本身提供了一些快捷創(chuàng)建 Store 的方式， 具體的參見 Ext手冊(cè) DataReader DataReader 表示數(shù)據(jù)讀取器，也就是數(shù)據(jù)解析器，其負(fù)責(zé)把從服務(wù)器戒者內(nèi)存數(shù)組、 xml文檔中獲得的雜亂信息轉(zhuǎn)換成 ExtJS 中的記錄集 Record 數(shù)據(jù)對(duì)象，并存儲(chǔ)到 Store 里面的記錄集數(shù)組中。 數(shù)據(jù)解析器的基類由 ，其它具體的數(shù)據(jù)解析器都是該類的子類，ExtJS 中提供了讀取二維數(shù)組、 JSon 數(shù)據(jù)及 Xml 文檔的三種數(shù)據(jù)解析器 ，分別用于把內(nèi)存中的二級(jí)數(shù)組、 JSON 格式的數(shù)據(jù)及 XML 文檔信息解析成記錄集。 ArrayReader －數(shù)組解析器，用于讀取二維數(shù)組中的信息，并轉(zhuǎn)換成記錄集 Record 對(duì)象。 var MyRecord = ([ {name: 39。title39。, mapping:1}, {name: 39。username39。, mapping:2}, {name: 39。loginTimes39。, type:3} ])。 var myReader = new ({ id: 0 }, MyRecord)。 這里定義的 myReader 可以讀取下面的二維數(shù)組： [ [1, 39。測試 39。, 39。小王 39。,3], [2, 39。新年好 39。, 39。williamraym39。,13] ] DataReader JsonReader － Json 數(shù)據(jù)解析器，用于讀取 JSON 格式的數(shù)據(jù)信息，并轉(zhuǎn)換成記錄集Record 對(duì)象 var MyRecord = ([ {name: 39。title39。}, {name: 39。username39。, mapping: 39。author39。}, {name: 39。loginTimes39。, type: 39。int39。} ])。 var myReader = new ({ totalProperty: “results”,//為 2 root: “rows”,//數(shù)據(jù)集 id: id }, MyRecord)。 這里的 JsonReader 可以解析下面的 JSON 數(shù)據(jù)： { 39。results39。: 2, 39。rows39。: [ { id: 1, title: 39。測試 39。, author: 39。小王 39。, loginTimes: 3 }, { id: 2, title: 39。Ben39。, author: 39。williamraym39。, loginTimes:13} ] } //更多 JsonReader用法請(qǐng)參見 Ext手冊(cè) DataReader XmlReader － XML 文檔數(shù)據(jù)解析器，用于把 XML 文檔數(shù)據(jù)轉(zhuǎn)換成記錄集 Record對(duì)象 var MyRecord = ([ {name: 39。title39。}, {name: 39。username39。, mapping: 39。author39。}, {name: 39。loginTimes39。, type: 39。int39。} ])。 var myReader = new ({ totalRecords: results, record: rows, id: id }, MyRecord)。 上面的 myReader 能夠解析下面的 xml 文檔信息： topics results2/results row id1/id title測試 / title author小王 / author loginTimes3/ loginTimes /row row id2/id title新年好 / title author williamraym / author loginTimes13/ loginTimes /row /topics DataProxy DataProxy 字面解釋就是數(shù)據(jù)代理，也可以理解為數(shù)據(jù)源，也即從哪兒戒如何得到需要交給 DataReader 解析的數(shù)據(jù)。 數(shù)據(jù)代理（源）基類由 定義，在 DataProxy的基礎(chǔ)，ExtJS 提供了 、 、。 客戶端的內(nèi)存數(shù)組中讀取數(shù)據(jù) 可以直接使用 從服務(wù)器端加載的數(shù)據(jù) 可以直接使用 讀取跨域服務(wù)器中的數(shù)據(jù)時(shí)就可以直接使用 。 關(guān)于 DataProxy 與自定義 Store的更多內(nèi)容，請(qǐng)參考 Ext手冊(cè)。 EXT頁面布局 Accordion布局 ? Ext中布局的方式 ? 由類 ，名稱為 accordion，表示可折疊的布局，也就是說使用該布局的容器組件中的子元素是可折疊的形式 ? 在布局中配置丌同的參數(shù)，會(huì)展示出丌同的效果。 ? 如： animate為 true，表示在執(zhí)行展開折疊時(shí)是否應(yīng)用勱畫效果。 ? activeOnTop為 true,表示在點(diǎn)擊每一個(gè)子元素的頭部名稱戒右邊的按鈕，則會(huì)展開該面板，收縮其它已經(jīng)展開的面板，并將點(diǎn)擊的那個(gè)面板置于頂部顯示。 ? 具體的各個(gè)控件的勱作和效果大家可以參考 API BorderLayout局 ? Ext中布局的方式 ? 由類 ，布局名稱為 border。該布局把容器分成東南西北中五個(gè)區(qū)域，分別由 east， south, west， north, center來表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置，Bord