文档章节

编辑 Ext 表格(二)——— 编辑表格元素

丶大灰狼灬
 丶大灰狼灬
发布于 2016/07/18 11:15
字数 750
阅读 19
收藏 0

1. 编辑单元格

Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑,

表格的配置具体如下:

var gridTable = Ext.create('Ext.grid.Panel', {
  id: 'gridTable',
  region: 'center',
  layout: 'fit',
  columns: cols,
  store: gridStore,
  autoScroll: true,
  selModel: {  // 光标显示的是单元格模式
    selType: 'cellmodel'
  },
  plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
      clicksToEdit: 1 //设置单击单元格编辑
    })
  ],
});

 

配置完表格还需要对表格列的 editor 进行配置,

才能实现单元格编辑,例如:

{
  text: '姓名',
  dataIndex: 'Name',
  minWidth: 85,
  maxWidth: 85,
  sortable: false,
  menuDisabled: true,
  editor: {
    xtype: 'textfield',
    enableKeyEvents: false,
  }
},
{
  text: '列',
  dataIndex: 'col',
  width: 120,
  sortable: false,
  menuDisabled: true,
  renderer: function (a, b, c, rowIdx, colIdx) {
    if ("object" == typeof (a)) {
      var r = Ext.util.Format.date(a, 'H:i');
      return r;
    }

    return "";
  },
  editor: {
    xtype: 'timefield',
    format: 'H:i',
    enableKeyEvents: false,
  }
}

效果如下:

修改完按回车键,发现修改的单元格左上角有一个红色三角形,

这是 Ext 用来标记修改过的单元格,

如果想要修改完后不显示红色图标,

可以调用 commit()。

例如可以在 gridTable 中绑定一个 'edit' 事件,

当检测到单元格数据发生改变的时候触发,

代码如下:

listeners: {
  edit: function (editor, e) {
    e.record.commit();
  },
}

 

2. 右击单元格弹窗

首先先定义一个右键弹窗的面板,如下:

var contextmenu = new Ext.menu.Menu({
  id: 'context-menu',
  items: [{
    id: 'context-menu-first',
    rowIdx: 0,
    colIdx: 0,
    handler: function (m) {
      if ("设置" == m.text) {
        Ext.MessageBox.alert("提示", "设置成功");
      }
    }
  }]
});

 

然后在 gridTable 中定义一个鼠标右击事件:

itemcontextmenu: function (view, record, item, index, e) {
  // 禁用系统默认右键菜单
  e.preventDefault();

  contextmenu.items.items[0].setText("设置");
  contextmenu.showAt(e.getXY());
}

效果如下:

 

完整的代码:

<!-- 数据定义 -->
<script type="text/javascript">
  var data;  // 表格数据
  var cols;   // 表格列
  var gridStore = Ext.create('Ext.data.Store', {
    fields: ['Name']
  });
</script>

<!-- 事件定义 -->
<script type="text/javascript">
  // 初始化整个页面
  function onInit() {
    onLoadData();
    onInitVar();
    onInitColumn();
  };

  // 请求加载表格数据
  function onLoadData() {
    data = [{ 'Name': '老狼' }, { 'Name': '小羊' }];
    gridStore.loadData(data);
  };

  // 初始化页面的变量参数
  function onInitVar() {
    cols = [
      {
        xtype: 'rownumberer',
        text: '序号',
        align: 'center',
        minWidth: 50,
        maxWidth: 50,
      },
      {
        text: '姓名',
        dataIndex: 'Name',
        minWidth: 85,
        maxWidth: 85,
        sortable: false,
        menuDisabled: true,
        editor: {
          xtype: 'textfield',
          enableKeyEvents: false,
        }
      }
    ];
  };

  // 初始化列
  function onInitColumn() {
    gridTable.reconfigure(gridStore, cols);
  };

  // 添加行
  function onAddRow() {
    gridStore.add({});
  };

  // 删除行
  function onDelRow() {
    gridStore.removeAt(gridStore.count() - 1);
  };

  // 添加列
  function onAddColumn() {
    cols.push(
      {
        text: '列',
        dataIndex: 'col',
        width: 120,
        sortable: false,
        menuDisabled: true,
        editor: {
          xtype: 'textfield',
          enableKeyEvents: false,
        }
      }
    );
    gridTable.reconfigure(gridStore, cols);
  };

  // 删除列
  function onDelColumn() {
    cols.pop()
    gridTable.reconfigure(gridStore, cols);
  };

  // 保存
  function onSave() {
    console.log(gridTable);
    console.log(gridStore.data);
  };
</script>

<!-- 面板定义 -->
<script type="text/javascript">
  var toolbar = Ext.create('Ext.form.Panel', {
    id: 'tool-bar',
    region: 'north',
    bbar: [
      {
        xtype: 'button',
        text: '添加行',
        handler: onAddRow
      },
      {
        xtype: 'button',
        text: '删除行',
        handler: onDelRow
      },
      {
        xtype: 'button',
        text: '添加列',
        handler: onAddColumn
      },
      {
        xtype: 'button',
        text: '删除列',
        handler: onDelColumn
      },
      {
        xtype: 'button',
        text: '保存',
        handler: onSave
      }
    ]
  });
  
  //表格右键菜单
  var contextmenu = new Ext.menu.Menu({
    id: 'context-menu',
    items: [
      {
        id: 'context-menu-first',
        rowIdx: 0,
        colIdx: 0,
        handler: function (m) {
          if ("设置" == m.text) {
            Ext.MessageBox.alert("提示", "设置成功");
          }
        }
      }
    ]
  });

  var gridTable = Ext.create('Ext.grid.Panel', {
    id: 'gridTable',
    region: 'center',
    layout: 'fit',
    columns: cols,
    store: gridStore,
    autoScroll: true,
    selModel: {  // 光标显示的是单元格模式
      selType: 'cellmodel'
    },
    plugins: [
      Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1 //设置单击单元格编辑
      })
    ],
    listeners: {
      edit: function (editor, e) {
        e.record.commit();
      },
      itemcontextmenu: function (view, record, item, index, e) {
        // 禁用系统默认右键菜单
        e.preventDefault();
      
        contextmenu.items.items[0].setText("设置");
        contextmenu.showAt(e.getXY());
      }      
    },
  });
</script>

<!-- 脚本入口 -->
<script type="text/javascript">
  Ext.onReady(function () {
    Ext.create('Ext.Viewport', {
      id: 'iframe',
      layout: 'border',
      items: [
        toolbar,
        gridTable,
      ]
    });
  });
</script>

 

© 著作权归作者所有

丶大灰狼灬
粉丝 0
博文 2
码字总数 1238
作品 0
广州
程序员
私信 提问
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.8K
1
BootStrap中的JavaScript

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利) 前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧...

myy629464
2017/11/12
0
0
思达报表工具Style Report基础教程-五步创建一个报表

教程视频:http://v.youku.com/vshow/idXODk5OTI4Nzky.html?firsttime=0 一、连接数据源 1)建立数据源连接 打开报表设计器 首先选择新建数据源,输入合适的数据源名称。 然后在数据源向导中...

敏捷商业智能
2015/01/27
0
0
Andriod界面布局(2)—表格布局

表格布局 表格布局(TableLayout),将屏幕划分为表格,通过指定的行和列可以讲界面元素添加到表格中。网格的边界对用户是不可见的。同时表格布局还支持嵌套其他界面布局。 步骤 新建表格布局...

iBazinga
2016/11/19
38
0
非程序员如何使用 Git——版本控制你的生活

在协同工作和版本控制方面,Git 绝对是一个优秀的工具,但其优点并不被大众所熟知。在过去的几年中,由于大众对于文字处理,电子表格(译者注:这里暗指Word和Excel,下同。)以及其他常用的...

oschina
2014/05/19
6.2K
36

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 Java语法教程 编写Java源代码

现在我们来一步一步的编写第一个Java程序,鼎鼎大名的“HelloWorld”。 编写Java源代码 编写Java源代码可以使用任何无格式的文本编辑器,在Windows操作系统上可以使用记事本、Edit Plus等程序...

老码农的一亩三分地
13分钟前
2
0
JavaScript箭头函数中的this详解

前言 箭头函数极大地简化了this的取值规则。 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () {console.log("Hello, Fundebug!");} 箭头函数指的是用...

开元中国2015
24分钟前
2
0
ETL测试工具简介

ETL测试 ETL测试过程与其他测试过程类似,包括一些阶段。 确定业务需求 测试计划 设计测试用例和测试数据 测试执行和错误报告 总结报告 测试结束 ETL测试的类型 生产验证测试: 也称为表平衡...

python测试开发人工智能安全
37分钟前
1
0
OSChina 周四乱弹 —— 不能空腹吃早餐

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @for_ :#今日歌曲推荐# 很好听的钢琴曲,节奏简单,有一点伤感。分享Fabrizio Paterlini的单曲《Veloma》: 《Veloma》- Fabrizio Paterlini ...

小小编辑
今天
1K
13
探讨android更新UI的几种方法

作为IT新手,总以为只要有时间,有精力,什么东西都能做出来。这种念头我也有过,但很快就熄灭了,因为现实是残酷的,就算一开始的时间和精力非常充足,也会随着项目的推进而逐步消磨殆尽。我...

天王盖地虎626
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部