编辑 Ext 表格（二）——— 编辑表格元素

1. 编辑单元格 Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑， 表格的配置具体如下： vargridTable=Ext.create('Ext.grid.Panel',{ i

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>