EXTJS中的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>
复制代码

效果图:

EXTJS中的grid.panel配置

读取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);
        }
    }
}
复制代码

效果图:

EXTJS中的grid.panel配置

你可能感兴趣的:(EXTJS中的grid.panel配置)