您的位置：首页 > 编程语言 > ASP

ExtJS 6 Grid使用示例(ASP.NET MVC4 项目)

2016-07-15 14:46 671 查看

Model类如下:

public class UserStore
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string EmailAddress { get; set; }
}

Controller类如下:

public class GridController : Controller
{
public ActionResult Index()
{
var list = new List<UserStore>();
list.Add(new UserStore() { EmailAddress = "r.taylor@abc.com", FirstName = "Rose", LastName = "Taylor"});
list.Add(new UserStore() { EmailAddress = "r.Nguyen@abc.com", FirstName = "Russell", LastName = "Nguyen" });
list.Add(new UserStore() { EmailAddress = "e.davis@abc.com", FirstName = "Ellis", LastName = "Davis" });
list.Add(new UserStore() { EmailAddress = "n.clarke@abc.com", FirstName = "Neal", LastName = "Clarke" });
list.Add(new UserStore() { EmailAddress = "b.taylor@abc.com", FirstName = "Brendon", LastName = "Taylor" });

ViewBag.userStore = JsonConvert.SerializeObject(list);
return View();
}

}

Index.cshtml内容如下:

@{
ViewBag.Title = "Index";
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Demo</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/extjs/6.0.1/classic/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="http://cdn.bootcss.com/extjs/6.0.1/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/extjs/6.0.1/classic/theme-neptune/theme-neptune.js"></script>
<script type="text/javascript">
var userList = '@(Html.Raw(ViewBag.userStore))';
</script>
<script type="text/javascript" src="~/Scripts/grid.js"></script>
</head>
<body>
</body>

</html>

grid.js的代码:

Ext.define('UserList', {
extend: 'Ext.data.Model',
fields: ['firstName', 'lastName', 'emailAddress'] //you can comment these fields. It still works.
});

var userStore = Ext.create('Ext.data.Store', {
model: 'UserList',
data: Ext.JSON.decode(userList)
});

//定义分页
var pagebar = Ext.create("Ext.toolbar.Paging", {
store: userStore,
displayInfo: true,
displayMsg: "显示{0}-{1}条,共计{2}条",
emptyMsg: "没有数据"

});

Ext.application({
name: 'Ext6 Grid示例',
launch: function () {
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
selType: 'rowmodel',//'cellmodel',
plugins: [{
ptype: 'rowediting',
clicksToEdit: 1
}],
store: userStore,
columnLines: true,
//width: "100%",
//frame: true,
forceFit: true,
fixed:true,
height: 500,
title: 'Ext6 Grid示例',

 columns: [
{
text: 'First Name',
width: 200,
dataIndex: 'FirstName',
editor: 'textfield'
},
{
text: 'Last Name',
width: 200,
dataIndex: 'LastName',
editor: 'textfield'
},
{
text: 'Email Address',
width: 250,
dataIndex: 'EmailAddress',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Birth Date',
width: 250,
dataIndex: 'birthDate',
editor: 'datefield'
}
],
//分页功能
//bbar: pagebar,
//分页功能-效果同上
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,
dock: 'bottom',
displayInfo: true,
}]
});

}
});

展示页面如图:

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

标签：

相关文章推荐

新的分享

章节导航