这里藏的配置确实多。。

慢慢实践吧。

<!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. UESTC--758--P酱的冒险旅途（模拟）

    P酱的冒险旅途 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Status ...

  2. E20170830-mk

    translation  n. 翻译; 译本; 转化; 转变; calculate  vt. 计算; 估计; 打算,计划; 旨在; erase  vt. 抹去; 清除; 擦掉;

  3. C#格式化年月日截取

     //if (bm.Name == "DateYear") //年                 //{                 //    bm.Select();   ...

  4. 7.Flask-上传文件和访问上传的文件

     1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...

  5. C - Fafa and his Company

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

  6. .net core2.0 中使用aspectcore实现aop

    一.新建一个web application项目 1.1.添加AspectCore.Extensions.DependencyInjection引用 二.实现AbstractInterceptorAtt ...

  7. 书不在多,精读则灵 - Oracle入门书籍推荐

      作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.com/archives/2006/08/ora ...

  8. 关于Membership和身份认证的记录

    在今天写好的code中测试环节,当我用webconfig中的测试数据库就是ok的,但是更替为正式的就不行了: 报错的类是MemberShip,那就关系到身份认证的环节了 找了几个链接,记录下 1.身份 ...

  9. 解决 C# webbrowser 弹出json下载问题

    把以下内容保存为 .reg ,然后导入注册表,即可解决C# webbrowser 弹出json下载问题,也可通过程序修改. Windows Registry Editor Version 5.00 [ ...

  10. PJAX全局无刷新的设置方法~

    先添加必要文件: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></scrip ...