您的位置：首页 > 其它

Ext.grid.Panel主要配置及示例

2012-04-12 21:29 169 查看

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格式数据源

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.grid.Panel</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var provice = [
[1, "110000", "北京市"],
[2, "120000", "天津市"],
[3, "130000", "河北省"],
[4, "140000", "山西省"],
[5, "150000", "内蒙古"]
];

var grid = Ext.create("Ext.grid.Panel", {
title: "简单Grid示例",
renderTo: Ext.getBody(),
width: 300,
height: 200,
frame: true,
viewConfig: {
forceFit: true,
stripeRows: true
},
store: {
fields: [
{ name: "ProvinceID" },
{ name: "ProvinceNo" },
{ name: "ProvinceName" }
],
proxy: {
type: "memory",
data: provice,
reader: "array"
},
autoLoad: true
},
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>

效果图：

读取json格式数据源

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.grid.Panel</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var provice = [
{ "ProvinceID": "1", "ProvinceNo": "110000", "ProvinceName": "北京市" },
{ "ProvinceID": "2", "ProvinceNo": "120000", "ProvinceName": "天津市" },
{ "ProvinceID": "3", "ProvinceNo": "130000", "ProvinceName": "河北省" },
{ "ProvinceID": "4", "ProvinceNo": "140000", "ProvinceName": "山西省" },
{ "ProvinceID": "5", "ProvinceNo": "150000", "ProvinceName": "内蒙古" }
];

var grid = Ext.create("Ext.grid.Panel", {
title: "简单Grid示例",
renderTo: Ext.getBody(),
width: 300,
height: 200,
frame: true,
viewConfig: {
forceFit: true,
stripeRows: true
},
store: {
fields: [
{ name: "ProvinceID" },
{ name: "ProvinceNo" },
{ name: "ProvinceName" }
],
proxy: {
type: "memory",
data: provice,
reader: "json"
},
autoLoad: true
},
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>

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);
}
}
}

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航