Ext.grid.Panel主要配置及示例
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); } } }
效果图：
