这里藏的配置确实多。。

慢慢实践吧。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <style type="text/css">
      #uses the following css:
      .red-row{ background-color: #F5C0C0 !important; }
      .yellow-row{ background-color: #FBF8BF !important; }
      .green-row{ background-color: #99CC99 !important; }
    </style>

    <script type="text/javascript">
    Ext.onReady(function(){
      function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){
        var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
        "这个单元格的值为: " + value + "\\n" +
        "这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +
        "这个单元格对应的record是： " + record + ", 一行里的数据都在里边\\n" +
        "这是第" + rowIndex + "行\\n" +
        "这是第" + columnIndex + "列\\n" +
        "这个表格对应的Ext.data.Store在这里： " + store + "， 随便用吧." +
        "\")'>"
        return str;
      }

      var sm = new Ext.selection.CheckboxModel({stringSelect: true});

      var columns =[
        new Ext.grid.RowNumberer(),
        {header: '编号', dataIndex: 'id', width:80, sortable: false},
        {header: '名称', dataIndex: 'name', editor: {allowBlank: false}, width:180},
        {header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},

      ];

      var store = new Ext.data.ArrayStore({
        proxy: {
          type: 'ajax',
          url: 'source.html',
          reader: {
            type: 'json',
            totalProperty: 'totalProperty',
            root: 'root',
            idProperty: 'id'
          }
        },
        groupField: 'id',
        sorter: [{property: 'id', direction: 'ASC'}],
        fields: [
          {name: 'id'},
          {name: 'name'},
          {name: 'descn'}
        ]
      });

      var grid = new Ext.grid.GridPanel({
        enableColumnMove: false,
        enableColumnResize: true,
        stripeRows: true,
        autoHeight: true,
        loadMask:true,
        forceFit: true,
        renderTo: 'grid',
        store: store,
        columns: columns,
        selModel: sm,
        features: [{ftype: 'grouping'}],
        plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
          })
        ],
        tbar: ['-',{
          text: '增加一行',
          handler: function(){
            var p = {
              id: '',
              name: '',
              descn: '',
            };
            store.insert(0, p);
          }
        }, '-', {
          text: '删除一行',
          handler: function() {
            Ext.Msg.confirm('notice', 'are you sure delete?', function(btn){
              if(btn == 'yes'){
                var sm = grid.getSelectionModel();
                var record = sm.getSelection()[0];
                store.remove(record);
              }
            });
          }
        }, '-'],
        bbar: new Ext.PagingToolbar({
          pageSize: 30,
          store: store,
          displayInfo: true,
          displayMsg: '显示第{0} 条到 {1}条记录， 一共{2}条',
          emptyMsg: '没有记录'
        })
      });
      store.load();

      var grid2 = new Ext.grid.PropertyGrid({
        title: '属性表格',
        autoHeight: true,
        width:300,
        renderTo: 'grid2',
        viewConfig: {
          forceFit: true
        },
        source: {
          '名字': '不告诉你',
          '创建时间': new Date(),
          '是否有效': false,
          '版本号': .01,
          '描述': '嗯，我也没啥可描述的'
        }
      });
    });
    </script>
</head>
<body style="margin: 20px">
  <div id='grid' style="width: 800px"></div>
  <div id='grid2' style="width: 800px"></div>
</body>
</html>

　　

ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧的更多相关文章

  1. IOS Runtime属性关联实现表格编辑文本

    要实现在表格里编辑文本, 表格让我想到了CollectionView,文本让我想起TextView, 做之前想了好久怎么样来获得编辑的是哪个TextView,要获取对应的IndexPath啊,想着之前 ...

  2. Extjs中GridPanel的各个属性与方法

    1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充 ...

  3. 编辑 Ext 表格（二）——— 编辑表格元素

    一.编辑单元格 Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑, 表格的配置具体如下: var gridTable = Ext.create('Ext.grid.Panel', { ...

  4. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

  5. 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  6. JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

  7. JQuery实战总结一 可编辑的表格

    JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...

  8. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  9. jQuery——能够编辑的表格

    版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635     今天学习了利用jQuery实现能够编辑的表格这个 ...

随机推荐

  1. Android WiFi开发教程（三）——WiFi热点数据传输

    在上一篇文章中介绍了WiFi的搜索和连接,如果你还没阅读过,建议先阅读上一篇Android WiFi开发教程(二)——WiFi的搜索和连接.本篇接着简单介绍手机上如何通过WiFi热点进行数据传输. 跟 ...

  2. 【POJ 3630】 Phone List

    [题目链接] http://poj.org/problem?id=3630 [算法] 字典树 [代码] #include <algorithm> #include <bitset&g ...

  3. 胜利大逃亡(续)(bfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=1429 #include <stdio.h> #include <queue> #incl ...

  4. Labeling Balls(拓扑)

    http://poj.org/problem?id=3687 看题意看了半天没看懂怎么回事,看完Discuss彻底凌乱了..后来看了题解才懂,就是逆向建图+拓扑排序,建图时要判重边. #include ...

  5. ThreadLocal，静态变量，实例变量，局部变量的线程安全

    之前都是业务层次开发,现在公司进行的网络编程,一下子要了解太多java底层的东西并进行应用,我现在边学习边应用.由于知识能力有限,在上次发博客时出现了一个小小的纰漏,而这个纰漏被细心的博友发现了. 首 ...

  6. ROS-URDF-活动关节

    前言:介绍活动关节,并使机器人活动起来. 参考自:http://wiki.ros.org/urdf/Tutorials/Building%20a%20Movable%20Robot%20Model%2 ...

  7. C - Fafa and his Company

    Problem description Fafa owns a company that works on huge projects. There are n employees in Fafa's ...

  8. resultType和resultMap区别，，，1-1一个订单只能对应一个用户，1对多，一个用户对应多个订单

    -----------------1-多

  9. Error:CreateProcess error=216的错误，JDK版本不匹配问题。

    今天刚下载安装完android studio,结果随便新建一个工程的时候就出现了如下提示: Error:CreateProcess error=216, 该版本的 %1 与您运行的 Windows 版 ...

  10. 【PostgreSQL-9.6.3】如何实现非自动提交

    我们在使用psql工具操作数据库时,事务是自动提交的.也就是说,当我们执行完一条insert或者delete语句后,在不输入commit情况下,这条语句也是提交的.如果不想自动提交,可以使用以下两种方 ...