极客神殿

坚持,自由,信仰

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类如下:

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

    }
});
展示页面如图:



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/WuLex/article/details/51917585
个人分类: ExtJS框架
想对作者说点什么? 我来说一句

创建ext-6.0.2demo

2016年10月29日 35.81MB 下载

ExtJS6.0开发培训

2016年02月27日 1.12MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭