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

来源：互联网发布：淘宝助理批量发布宝贝编辑：程序博客网时间：2024/05/14 15:10

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

展示页面如图:

2 0