Ext架構的Grid使用介紹

Ext2.0是一個JS架構，它的Grid控件和其它可以顯示資料的控件，能夠支援多種資料類型，如二維數組、Json資料和XML資料，甚至包括我們自定義的資料類型。Ext為我們提供了一個橋梁Ext.data.Store，通過它我們可以把任何格式的資料轉化成grid可以使用的形式，這樣就不需要為每種資料格式寫一個grid的實作了。 首先，一個表格應該有列定義，即定義表頭ColumnModel： // 定義一個ColumnModel，表頭中有四列 var cm = new Ext.grid.ColumnModel([      {header:'編号',dataIndex:'id'},      {header:'性别',dataIndex:'sex'},      {header:'名稱',dataIndex:'name'},      {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true;     該ColumnModel定義了表格的四個列，其每列的名稱和對應的資料鍵。請注意defaultSortable屬性，即為每個列都安上一個可以排序的功能。如果隻想某些列舉有該功能，可以設定： {header:'編号',dataIndex:'id',Sortable:true}, 現在就來看看這個Ext.data.Store是如何轉換三種資料的。 1.二維數組： // ArrayData var data = [      ['1','male','name1','descn1'],      ['2','male','name1','descn2'],      ['3','male','name3','descn3'],      ['4','male','name4','descn4'],      ['5','male','name5','descn5'] ]; // ArrayReader var ds = new Ext.data.Store({      proxy: newExt.data.MemoryProxy(data),      reader: newExt.data.ArrayReader({}, [         {name: 'id',mapping: 0},          {name: 'sex',mapping: 1},          {name: 'name',mapping: 2},          {name: 'descn',mapping: 3}      ]) }); ds.load(); ds要對應兩個部分：proxy和reader。proxy告訴我們從哪裡獲得資料，reader告訴我們如何解析這個資料。 現在用的是Ext.data.MemoryProxy，它将記憶體中的資料data作為參數傳遞。Ext.data.ArrayReader專門用來解析數組，并且告訴我們它會按照定義的規範進行解析，每行按順序讀取四個資料，第一個叫id，第二個叫sex，第三個叫name，第四個descn。這些是跟cm定義中的dataIndex對應的。這樣cm就知道哪列應該顯示那條資料了。 mapping屬性用于标記data中的讀取後的資料與标頭的映射關系，一般是不用設定的。但如果我們想讓sex的資料中name欄中出現，可以設定mapping值。即id的mapping為2,後者為0。 記得要執行一次ds.load()，對資料進行初始化。 資料的顯示顯得非常簡單： HTML檔案： <div id='grid'></div> JS檔案： var grid = new Ext.grid.GridPanel({      el: 'grid',      ds: ds,      cm: cm }); grid.render(); 其顯示結果為： 2.如何在表格中添加CheckBox呢？ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([     new Ext.grid.RowNumberer(),//自動行号     sm,//添加的地方     {header:'編号',dataIndex:'id'},     {header:'性别',dataIndex:'sex'},     {header:'名稱',dataIndex:'name'},     {header:'描述',dataIndex:'descn'} ]); var grid = new Ext.grid.GridPanel({     el: 'grid3',     ds: ds,     cm: cm,     sm: sm,//添加的地方     title: 'HelloWorld' }); ​ 3. 如何做Grid上觸發事件呢？下面是一個cellclick事件 grid.addListener('cellclick', cellclick); function cellclick(grid, rowIndex, columnIndex, e) {     var record = grid.getStore().getAt(rowIndex);   //Get the Record     var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name     var data = record.get(fieldName);     Ext.MessageBox.alert('show','目前選中的資料是'+data); } 4.如何做Grid中做出快捷菜單效果： grid.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關鍵部分 var rightClick = new Ext.menu.Menu({     id:'rightClickCont', //在HTML檔案中必須有個rightClickCont的DIV元素     items: [         {             id: 'rMenu1',             handler: rMenu1Fn,//點選後觸發的事件             text: '右鍵菜單1'         },         {             //id: 'rMenu2',             //handler: rMenu2Fn,             text: '右鍵菜單2'         }     ] }); function rightClickFn(grid,rowindex,e){     e.preventDefault();     rightClick.showAt(e.getXY()); } function rMenu1Fn(){    Ext.MessageBox.alert('right','rightClick'); } 其Grid如下： 5.如何将一列中的資料根據要求進行改變呢？比如說性别字段根據其male或female改變顯示的顔色，這種ColumnMode中設計： var cm = new Ext.grid.ColumnModel([     new Ext.grid.RowNumberer(),     sm,     {header:'編号',dataIndex:'id'},     {header:'性别',dataIndex:'sex',renderer:changeSex},     {header:'名稱',dataIndex:'name'},     {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true; function changeSex(value){     if (value == 'male') {         return "<span style='color:red;font-weight:bold;'>紅男</span>";     } else {         return "<span style='color:green;font-weight:bold;'>綠女</span>";     } } 其它兩種資料的Grid顯示是相同的，其不同之處在于資料擷取的過程： 6.Json資料 至于這種資料的類型請大家自己看Ajax的書籍： //JsonData var data = {     'coders': [         { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': ​​'[email protected]'​​ },         { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': ​​'[email protected]'​​ },         { 'id': '3', 'sex': 'female','name':'Harold', 'descn': ​​'[email protected]'​​ },         { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': ​​'[email protected]'​​ }     ],     'musicians': [         { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },         { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }     ] } //ds使用的MemoryProxy對象和JsonReader對象 var ds = new Ext.data.Store({         proxy: new Ext.data.MemoryProxy(data),         reader: new Ext.data.JsonReader({root: 'coders'}, [             {name: 'id'},             {name: 'sex'},             {name: 'name'},             {name: 'descn'}         ])     }); ds.load(); var grid = new Ext.grid.GridPanel({     el: 'grid3',     ds: ds,     cm: cm,     sm: sm,     title: 'HelloWorld',     autoHeight: true//一定要寫，否則顯示的資料會少一行 }); grid.render(); 7.使用XML資料：注意，讀取XML資料必須在伺服器上進行。 XML資料test.xml的内容： <?xml version="1.0" encoding="UTF-8"?> <dataset>      <results>2</results>      <item>            <id>1</id>            <sex>male</sex>            <name>Taylor</name>            <descn>Coder</descn>      </item> </dataset>var ds3 = new Ext.data.Store({     url: 'test.xml',   //XML資料     reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader對象         {name: 'id'},         {name: 'sex'},         {name: 'name'},         {name: 'descn'}     ]) }); 8.從伺服器擷取資料和資料翻頁控件 從一個伺服器檔案，如ASP、JSP或Servlet中獲得資料二維Array、JSON或XML資料，也可以被Ext讀取，并被Grid顯示： 伺服器檔案data.asp: <%     start = cint(request("start"))     limit = cint(request("limit"))     dim json     json=cstr("{totalProperty:100,root:[")     for i = start to limit + start-1         json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")         if i <> limit + start - 1 then             json =json + ","         end if     next     json = json +"]}"     response.write(json) %> 我們可以看到，這個頁面會根據傳入的start和limit的不同，傳回不同的資料，其實質是個分頁的代碼。下面是start=0,limit=10的JSON資料： {totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]} 我們使用分頁控件來控制Grid的資料： Ext.onReady(function(){     var sm = new Ext.grid.CheckboxSelectionModel();     var cm = new Ext.grid.ColumnModel([         new Ext.grid.RowNumberer(),         sm,         {header:'編号',dataIndex:'id'},         {header:'性别',dataIndex:'sex'},         {header:'名稱',dataIndex:'name'},         {header:'描述',dataIndex:'descn'}     ]);     cm.defaultSortable = true;     var ds = new Ext.data.Store({         proxy: new Ext.data.HttpProxy({url:'data.asp'}),         reader: new Ext.data.JsonReader({             totalProperty: 'totalProperty',             root: 'root'         }, [             {name: 'id'},             {name: 'name'},             {name: 'descn'}         ])     });     ds.load({params:{start:0,limit:10}});     var grid = new Ext.grid.GridPanel({         el: 'grid3',         ds: ds,         cm: cm,         sm: sm,         title: 'ASP->JSON',         bbar: new Ext.PagingToolbar({             pageSize: 10,             store: ds,             displayInfo: true,             displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',             emptyMsg: "沒有記錄"         }),         tbar: new Ext.PagingToolbar({             pageSize: 10,             store: ds,             displayInfo: true,             displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',             emptyMsg: "沒有記錄"         })     });     grid.render(); }) 10.如何在Grid的上方添加按鈕呢？ 添加按鈕的關鍵之處在于tbar或bbar屬性設定Toolbar工具條： var grid = new Ext.grid.GridPanel({     el: 'grid3',     ds: ds,     cm: cm,     sm: sm,     title: 'HelloWorld',     tbar: new Ext.Toolbar({         items:[                 {                     id:'buttonA'                     ,text:"Button A"                     ,handler: function(){ alert("You clicked Button A"); }                 }                 ,                 new Ext.Toolbar.SplitButton({})                 ,{                     id:'buttonB'                     ,text:"Button B"                     ,handler: function(){ alert("You clicked Button B"); }                 }                 ,                 '-'                 ,{                     id:'buttonc'                     ,text:"Button c"                 }             ]         }) }); 11.将GridPanel放入一個Panel或TabPanel中 var tabs = new Ext.TabPanel({     collapsible: true     ,renderTo: 'product-exceptions'     ,width: 450     ,height:400     ,activeTab: 0     ,items:[         {             title: 'Unmatched'         },{             title: 'Matched'         }     ] }); tabs.doLayout();