標籤：
無廢話ExtJs 入門教程十七[列表：GridPanel]extjs技術交流，歡迎加群（201926085)在Extjs中，GridPanel用於資料顯示，即我們平時說的列表頁。在本節中，我們先對GridPanel有個基本的認識，後繼過程再做Demo練習詳細講解在開發中的應用。
1.代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs架構開始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs架構結束--> 11 <script type="text/javascript"> 12 Ext.onReady(function () { 13 //資料來源 14 var jsonstore = new Ext.data.JsonStore({ 15 data: [ 16 { id: 1, name: ‘張三‘, sex: ‘0‘, birthday: ‘2001/01/01‘ }, 17 { id: 2, name: ‘李四‘, sex: ‘1‘, birthday: ‘2002/01/01‘ }, 18 { id: 3, name: ‘王五‘, sex: ‘0‘, birthday: ‘2003/01/01‘ } 19 ], 20 fields: [‘id‘, ‘name‘, ‘sex‘, { name: ‘birthday‘, type: ‘date‘, dateformat: ‘Y/m/d‘}] 21 }); 22 //複選框列 23 var sm = new Ext.grid.CheckboxSelectionModel(); 24 //渲染性別 25 var sexrender = function (value, metaData, record, rowIndex, cloIndex, store) { 26 if (value == ‘0‘) { 27 metaData.attr = ‘style="font-weight:bold";‘ 28 return ‘男‘; 29 } 30 else 31 return ‘女‘; 32 } 33 //定義列 34 var column = new Ext.grid.ColumnModel({ 35 columns: [ 36 sm, 37 { header: ‘編號‘, dataIndex: ‘id‘, sortable: true }, 38 { header: ‘姓名‘, dataIndex: ‘name‘ }, 39 { header: ‘性別‘, dataIndex: ‘sex‘, renderer: sexrender }, 40 { header: ‘出生日期‘, dataIndex: ‘birthday‘, renderer: Ext.util.Format.dateRenderer(‘Y-m-d‘) } 41 ] 42 }); 43 //添加按鈕 44 var tbtn = new Ext.Toolbar.Button({ 45 text: ‘查看選中項‘, 46 listeners: { 47 ‘click‘: function () { 48 var row = grid.getSelectionModel().getSelections(); 49 for (var i = 0; i < row.length; i++) { 50 alert(row[i].get(‘id‘)); 51 } 52 } 53 } 54 }); 55 //分頁控制項 56 var pager = new Ext.PagingToolbar({ 57 pageSize: 2, 58 store: jsonstore, 59 listeners: { 60 "beforechange": function (bbar, params) { 61 var grid = bbar.ownerCt; 62 var store = grid.getStore(); 63 var start = params.start; 64 var limit = params.limit; 65 alert(store.getCount()); 66 return false; 67 } 68 } 69 }); 70 //列表 71 var grid = new Ext.grid.GridPanel({ 72 sm: sm, 73 title: ‘GridPanel‘, 74 height: 200, 75 store: jsonstore, 76 tbar: [tbtn], 77 bbar: pager, 78 colModel: column 79 }); 80 //表單 81 var form = new Ext.form.FormPanel({ 82 frame: true, 83 fileUpload: true, 84 url: ‘/App_Ashx/Demo/Upload.ashx‘, 85 title: ‘表單標題‘, 86 style: ‘margin:10px‘, 87 items: [grid] 88 }); 89 //表單 90 var win = new Ext.Window({ 91 title: ‘視窗‘, 92 width: 476, 93 height: 374, 94 resizable: true, 95 modal: true, 96 closable: true, 97 maximizable: true, 98 minimizable: true, 99 buttonAlign: ‘center‘,100 items: form101 });102 win.show();103 });104 </script>105 </head>106 <body>107 <!--108 說明：109 (1)var jsonstore = new Ext.data.JsonStore():建立一個新的資料來源。110 data: 資料項目，如資料庫中的儲存一樣111 id name sex brithday112 1 張三 0 2001-01-01113 2 李四 1 2002-01-01114 3 王五 0 2003-01-01115 fields: 列的定義,指出資料來源應該有幾列，每列的名稱和資料類型等資訊，如上所示，說明存在4列，列名分別為：id,name,sex,brithday。116 (2) var sm = new Ext.grid.CheckboxSelectionModel()：建立一個複選框的列。117 注意 sm 要在兩個地方使用，一、要告訴列模型，上例的36行。二、要告訴列表，上例的72行。缺一不可。118 (3)var column = new Ext.grid.ColumnModel():grid的列，這個是定義gird應該有幾列。119 如上所示：第一列為：sm[複選框]，第二列為：{ header: ‘編號‘, dataIndex: ‘id‘, sortable: true }，header：顯示在gird上面的標題，dataIndex：‘id‘對應資料來源的映射關係，意思就是說，表頭顯示叫"編號"，而實際的資料對應的是資料來源的id這一列。120 { header: ‘性別‘, dataIndex: ‘sex‘, renderer: sexrender }：renderer渲染列，執行的方法為 sexrender121 var sexrender = function (value, metaData, record, rowIndex, cloIndex, store) {122 if (value == ‘0‘){123 metaData.attr = ‘style="font-weight:bold";‘124 return ‘男‘;125 }126 else127 return ‘女‘;128 }129 參數說明：130 value:目前的儲存格的值。131 meetaData:設定元素<div>男</div>的樣式表與屬性值，如上所示：我加了個加粗顯示的樣式。這個參數包含兩個屬性：metaData.css與metaData.attr132 record：當前Record對象引用。133 rowIndex:目前的儲存格行的索引。134 colIndex:目前的儲存格列的索引。135 store:store的引用。136 我們最常用的就是 value，平時寫的時候大多數只傳value，例如： var sexrender = function(value){處理方法}137 (4)var tbtn = new Ext.Toolbar.Button()：建立一個工具列按鈕，tbar可以添加多個按鈕，處理不同的方法，如"添加","刪除","修改"等。138 (5)var row = grid.getSelectionModel().getSelections():擷取選中項的行，row[i].get(‘id‘)擷取行中的某一列。139 (6)var grid = new Ext.grid.GridPanel()：聲明一個新的gird。140 sm: sm,//選擇列141 store: jsonstore,//資料來源142 tbar: [tbtn],//頂部的按鈕143 bbar: pager,//底部的分頁144 colModel: column//列表頭與列145 (7)var pager = new Ext.PagingToolbar()：建立一個新的分頁控制項146 pageSize: 2,//頁碼大小為2147 store: jsonstore,分頁的資料來源148 listeners: {//由於沒有連結後台資料庫動態綁定資料庫，這裡在，點下一頁時‘beforechange’事件做了個 return false149 "beforechange": function (bbar, params) {150 var grid = bbar.ownerCt;151 var store = grid.getStore();152 var start = params.start;//起始資料的索引號153 var limit = params.limit;//每頁的大小154 console.log("==下面是列印資訊")155 console.log(store.getCount());156 console.log(start);157 console.log(limit);158 console.log("==列印結束。")159 return false;160 }161 }162 });163 -->164 </body>165 </html>
2.效果如下：
轉載請註明出處：http://www.cnblogs.com/iamlilinfeng
無廢話ExtJs 入門教程十七[列表：GridPanel]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
