这里藏的配置确实多。。

慢慢实践吧。

<!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语言/C++中如何产生随机数

    C语言/C++中如何产生随机数 作者: 字体:[增加 减小] 类型:转载 时间:2013-10-14我要评论 这里要用到的是rand()函数, srand()函数,和time()函数.需要说明的是,i ...

  2. Vim 复制粘贴探秘

    Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...

  3. hdu 2846（字典树）

    Repository Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  4. B3680 吊打xxx 物理？？？

    看到一道很有意思的题,这个题简直有毒,是一道物理题...好像得用模拟退火...但显然我太弱了不会模拟退火,只能用正交分解暴力... 每次沿着力的方向走一定的距离,假如转头了,则走的步长就减小一点. 不 ...

  5. awk 去重的同时并保持原来的顺序

    #-----------awk.awk------------ {    if(data[$0]++ == 0)        lines[++count] = $0} END {    for (i ...

  6. (Go)05.基本数据类型和操作符

    保留的关键字段 1.Question1 package main import ( "fmt" ) func list(n int) { ; i <= n; i++ { fm ...

  7. idea使用svn

    一.在idea中配置svn 二.导出maven项目 连接svn 点击checkout 点击ok就可以 到Commit Changes 这里有几个选项需要了解的: Auto-update after c ...

  8. 5.30获取openid和createTime--mybatis自动生成接口和映射【这里需要自定义】

    自定义sql获取数据:        dao:            前提是反向成了代码:                A : 接口PhoneModelMapper extends IBaseMap ...

  9. css3基础篇二

    CSS3 边框 border-radius box-shadow border-image(ie不支持) 语法 border-radius: 1-4 length|% / 1-4 length|%; ...

  10. tomcat ider配置

    xml文件配置: <servlet> <servlet-name>test1</servlet-name>//设定java文件链接的锚点 <servlet-c ...