关闭

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

标签: asp.netmvcextjsgridsencha
3321人阅读 评论(1) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1001121次
    • 积分:14728
    • 等级:
    • 排名:第898名
    • 原创:311篇
    • 转载:706篇
    • 译文:72篇
    • 评论:265条
    博客专栏
    文章分类
    打赏
    如果你觉得我的文章对您有用,请随意打赏。 微信 支付宝