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

最新推荐文章于 2018-02-26 09:13:29 发布

.NET跨平台

最新推荐文章于 2018-02-26 09:13:29 发布

阅读量5.7k

点赞数 2

分类专栏： ExtJS框架文章标签： asp.net mvc extjs grid sencha

本文链接：https://blog.csdn.net/WuLex/article/details/51917585

版权

ExtJS框架专栏收录该内容

7 篇文章 4 订阅

订阅专栏

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

    }
});

展示页面如图:

.NET跨平台

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
ExtJS 6 Grid使用示例(ASP.NET MVC4 项目)

Model类如下: public class UserStore { public string FirstName { get; set; } public string LastName { get; set; } public string EmailAddress { get; set; } }Controller类如下
复制链接

扫一扫