关闭

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

标签: asp.netmvcextjsgridsencha
3857人阅读 评论(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
查看评论

Extjs6 gridPanel排序与获取Store的排序信息

ExtJS6中表格排序也与ExtJS3中有所区别,下面分别给出这两个版本的实现方法 ExtJS3: // 复选框模型 var selm = new Ext.grid.CheckboxSelectionModel(); // 定义列模型 var colm = new Ext.grid.Colum...
  • diweikang
  • diweikang
  • 2015-11-13 12:27
  • 2324

Extjs6问题——grid不显示数据

使用MVVC框架显示一个表格,遇到gridPanel只显示表头,但是不显示数据的问题,可以从以下的几个角度考虑。  1. 数据是否有问题?检查返回的json数据结构是否与reader对应。  2. models里面fields对应关系是否正确?保险起见最好加上mapping。 &...
  • u013237862
  • u013237862
  • 2016-04-06 19:14
  • 469

很全面介绍ExtJs之grid使用

Ext2.0是一个javascript框架,它的Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不...
  • wxw520zdh
  • wxw520zdh
  • 2017-04-14 10:34
  • 873

[Sencha ExtJS & Touch] 表格(Ext.grid.Grid) 和 表格视图选项(Ext.grid.plugin.ViewOptions) 使用的时候要注意的问题

原文地址: 下图是Sencha ExtJS6 Modern 的表格(Grid),Sencha Touch 也类似: 如果添加了插件Ext.grid.plugin.ViewOptions,那么长按列头,就会弹出下面的(Sencha Touch是在列头上从最右边往左滑): (Ext.g...
  • lovelyelfpop
  • lovelyelfpop
  • 2016-05-18 08:38
  • 1026

ext6使用的一些笔记(转)

记性不好的人啊,还是写下来吧。 安装 安装senchacmd 安装ruby 下载ext.js,这里是ExtJS 6.0.0 GPL开源版。吐个槽,文档里总是会提到sdk,然后后面我猜发现sdk指的就是下载下来的压缩包,我那心情啊。 sencha -sdk /path/to/...
  • qq_30938097
  • qq_30938097
  • 2017-11-08 18:05
  • 127

ExtJS Grid 分页时保持选中的简单实现方法

ExtJS Grid 分页时保持选中的简单实现方法2013-11-25 22:30ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就发生了,每一次翻页,其它页面的选中行就消失了。Ext 没有为我们提供内置的保持选中的支持,只有我们自己动手来实现了。先说一下具体的思路吧:首先在页面中创...
  • qiao0078
  • qiao0078
  • 2015-10-31 15:15
  • 1379

【ExtJs】与后台数据库交互的带分页表格组件grid的查询

ExtJs的表格组件Grid是可以分页的,并且这个组件是随时随地地与后台数据库进行这交互。正如VC的MFC中的List表格控件一样。 基本上,这个表格控件作为OA系统的主角,配合《【ExtJs】利用树状结构、Border布局与标签页刻划OA界面》(点击打开链接)就真的是一个完整的OA系统了。 然而网...
  • yongh701
  • yongh701
  • 2015-05-02 09:24
  • 3934

J2EE之 Extjs4.0 Grid 分页显示

ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持ch...
  • skyxuyan
  • skyxuyan
  • 2013-01-13 20:16
  • 8695

asp.net mvc中应用Grid++ Report (基本应用示例)

cshtml文件:<html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Repo...
  • wcj920946195
  • wcj920946195
  • 2016-06-28 23:19
  • 1463

在ASP.NET MVC中使用Grid.mvc

很久没有写ASP.NET的博文了,专心工作嘛,今天写一点MVC的博文,也是自己练习来的,是使用grid.mvc来显示数据。 首先打开Manage Nuget Packages,搜索grid.mvc并安装它: 创建一个控制器:   创建一个视图: ...
  • linybo
  • linybo
  • 2015-03-27 14:54
  • 1028
    个人资料
    • 访问:1297995次
    • 积分:18625
    • 等级:
    • 排名:第591名
    • 原创:312篇
    • 转载:932篇
    • 译文:123篇
    • 评论:297条
    博客专栏
    文章分类
    打赏
    如果你觉得我的文章对您有用,请随意打赏。 微信 支付宝