这里藏的配置确实多。。

慢慢实践吧。

<!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. 复习--二叉树&&树

    树是一种很常用的数据结构,日后的学习中会经常碰到运用树的知识. //构造二叉树#include<cstdio> #include<iostream> #include<a ...

  2. 洛谷 P1081 开车旅行 —— 倍增

    题目:https://www.luogu.org/problemnew/show/P1081 真是倍增好题! 预处理:f[i][j] 表示从 i 点开始走 2^j 次 AB (A,B各走一次)到达的点 ...

  3. Coursera Algorithms week1 查并集 练习测验：1 Social network connectivity

    题目原文描述: Given a social network containing. n members and a log file containing m timestamps at which ...

  4. thinkphp的session用法

    Session方法用于Session 设置.获取.删除和管理操作. Session 用于Session 设置.获取.删除和管理操作 用法 session($name, $value='') 参数 na ...

  5. Hive搭建与简单使用

    hive搭建与简单使用(1) 标签(空格分隔): hive,mysql hive相当于编译器的组件,他并不存储数据,元数据存储在mysql中,数据则存放在hdfs中,通过hive,可以利用sql语句对 ...

  6. JavaScript 函数 伪数组 arguments

    一.函数 函数:函数就是将一些语言进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 1.将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动 2.简化编程,让变 ...

  7. Apache 虚拟主机 配置方法

    打开httpd.conf文件 去掉LoadModule vhost_alias_module modules/mod_vhost_alias.so前面的#号 去掉Include conf/extra/ ...

  8. D - Garden

    Problem description Luba thinks about watering her garden. The garden can be represented as a segmen ...

  9. akka框架——异步非阻塞高并发处理框架

    akka actor, akka cluster akka是一系列框架,包括akka-actor, akka-remote, akka-cluster, akka-stream等,分别具有高并发处理模 ...

  10. 【PostgreSQL-9.6.3】修改监听的IP和端口

    在数据目录下编辑postgresql.conf文件,我的数据目录是/usr/local/pgsql/data vi postgresql.conf 找到如下内容: ... #listen_addres ...