1、Ext.grid.Panel主要配置項
| 配置項 | 參數類型 | 說明 |
|---|---|---|
| columns | Array | 表格列配置對象數組，每一個列配置對象都包括header和數據源的定義 |
| columnLines | Boolean | 設置true則顯示縱向表格線，默認為false |
| forceFit | Boolean | 設置true則強制列填充滿可利用的空間 |
| hideHeaders | Boolean | 設置true則隱藏列標題 |
| scroll | Boolean/String | 設置表格滾動條，有效值包括：both、horizontal和vertical。true等效於both，false等效於none，默認為true |
| sortableColumns | Boolean | 設置為false則禁用標題排序 |
2、Ext.grid.Panel示例
讀取Array格式數據源
代碼：
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 runat="server"> 4 <title>Ext.grid.Panel</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var provice = [ 10 [1, "110000", "北京市"], 11 [2, "120000", "天津市"], 12 [3, "130000", "河北省"], 13 [4, "140000", "山西省"], 14 [5, "150000", "內蒙古"] 15 ]; 16 17 var grid = Ext.create("Ext.grid.Panel", { 18 title: "簡單Grid示例", 19 renderTo: Ext.getBody(), 20 width: 300, 21 height: 200, 22 frame: true, 23 viewConfig: { 24 forceFit: true, 25 stripeRows: true 26 }, 27 store: { 28 fields: [ 29 { name: "ProvinceID" }, 30 { name: "ProvinceNo" }, 31 { name: "ProvinceName" } 32 ], 33 proxy: { 34 type: "memory", 35 data: provice, 36 reader: "array" 37 }, 38 autoLoad: true 39 }, 40 columns: [ 41 { header: "ID", width: 50, dataIndex:"ProvinceID", sortable: true }, 42 { header: "編號", width: 100, dataIndex: "ProvinceNo", sortable: true }, 43 { header: "名稱", width: 135, dataIndex: "ProvinceName", sortable: true } 44 ] 45 }); 46 }); 47 </script> 48 </head> 49 <body> 50 </body> 51 </html>
效果圖：
讀取json格式數據源
代碼：
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 runat="server"> 4 <title>Ext.grid.Panel</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var provice = [ 10 { "ProvinceID": "1", "ProvinceNo": "110000", "ProvinceName": "北京市" }, 11 { "ProvinceID": "2", "ProvinceNo": "120000", "ProvinceName": "天津市" }, 12 { "ProvinceID": "3", "ProvinceNo": "130000", "ProvinceName": "河北省" }, 13 { "ProvinceID": "4", "ProvinceNo": "140000", "ProvinceName": "山西省" }, 14 { "ProvinceID": "5", "ProvinceNo": "150000", "ProvinceName": "內蒙古" } 15 ]; 16 17 var grid = Ext.create("Ext.grid.Panel", { 18 title: "簡單Grid示例", 19 renderTo: Ext.getBody(), 20 width: 300, 21 height: 200, 22 frame: true, 23 viewConfig: { 24 forceFit: true, 25 stripeRows: true 26 }, 27 store: { 28 fields: [ 29 { name: "ProvinceID" }, 30 { name: "ProvinceNo" }, 31 { name: "ProvinceName" } 32 ], 33 proxy: { 34 type: "memory", 35 data: provice, 36 reader: "json" 37 }, 38 autoLoad: true 39 }, 40 columns: [ 41 { header: "ID", width: 50, dataIndex: "ProvinceID", sortable: true }, 42 { header: "編號", width: 100, dataIndex: "ProvinceNo", sortable: true }, 43 { header: "名稱", width: 135, dataIndex: "ProvinceName", sortable: true } 44 ] 45 }); 46 }); 47 </script> 48 </head> 49 <body> 50 </body> 51 </html>
3、Ext.grid.Panel動態加載數據示例
HTML代碼：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Ext.grid.Panel動態加載數據</title> <link href="@Url.Content("~/Scripts/ext-4.0.7-gpl/resources/css/ext-all.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/ext-4.0.7-gpl/bootstrap.js")" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.define("Province", { extend: "Ext.data.Model", fields: [ { name: "ProvinceID" }, { name: "ProvinceNo" }, { name: "ProvinceName" } ] }); var store = Ext.create("Ext.data.Store", { model: "Province", proxy: { type: "ajax", url: "/Province/Index", reader: new Ext.data.JsonReader({ model: "Province" }) }, autoLoad: true }); Ext.create("Ext.grid.Panel", { title: "Ext.grid.Panel", renderTo: Ext.getBody(), frame: true, height: 300, width: 320, store:store, columns: [ { header: "ID", width: 50, dataIndex: "ProvinceID", sortable: true }, { header: "編號", width: 100, dataIndex: "ProvinceNo", sortable: true }, { header: "名稱", width: 135, dataIndex: "ProvinceName", sortable: true } ] }); }); </script> </head> <body> </body> </html>
cs代碼：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Northwind.Domain.Entities; using Northwind.Data; using Northwind.Service; namespace Northwind.Web.Controllers { public class ProvinceController : Controller { private IProvinceService provinceService; public ProvinceController(IProvinceService provinceService) { this.provinceService = provinceService; } public ActionResult Grid() { return View(); } public JsonResult Index() { return Json(provinceService.GetAll(), JsonRequestBehavior.AllowGet); } } }
效果圖：
