这里藏的配置确实多。。

慢慢实践吧。

<!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. C 非标准库（conio.h）

    所谓的 C 标准库(C standard library),是指在 ISO C 或者 POSIX 标准中定义的: POSIX is a superset(超集) of the standard C l ...

  2. bzoj 1024 [ SCOI 2009 ] 生日快乐 —— 递归

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1024 因为每次把一块切成两块,所以可以枚举从哪里切开,然后递归求解: 一开始用了不太对的贪心 ...

  3. 8.19noip模拟题

      2017 8.19 NOIP模拟赛 by coolyangzc 共3道题目,时间3小时 题目名 高级打字机 不等数列 经营与开发 源文件 type.cpp/c/pas num.cpp/c/pas ...

  4. python 9：list.reverse()（倒置原列表,可恢复改变）

    bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) bicycles.reverse() #倒置原列 ...

  5. var _this = this 是干什么的

    因为JS可以多层嵌套代码可能下面还可以再嵌一个方法引用this就会变成子方法控制的对象如果需要上级的对象在没有参数的情况下前面前提做了一个临时变量_this可以保存上级对象子方法中就可以用_this来 ...

  6. Android 判断app是否安装

    1. private boolean isAppInstalled(Context context, String uri) { PackageManager pm = context.getPack ...

  7. Windows下错误码全解析

    windows系统下,调用函数出错时.可以调用GetLastError函数返回错误码.但是GetLastError函数返回值是DWORD类型,是一个整数.如果想要知道函数调用的真正错误原因,就需要对这 ...

  8. 【Oracle】to_char技巧

    Select to_char(sysdate,'ss') from dual;      取当前时间秒部分 Select to_char(sysdate,'mi') from dual;      取 ...

  9. POJ_2186_Popular Cows_强连通分量

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 30680   Accepted: 12445 De ...

  10. JDBC Druid式link

    准备工作:导入包------druid-1.0.9.jar    src文件夹下放下druid.properties文件 且其中的url和数据库名要配置完备 import JdbcUtils.JDBC ...