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

一、编辑单元格

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();

    },

}

 

二、右击单元格弹窗

首先先定义一个右键弹窗的面板，如下：

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,
             ]
         });

         onInit();
     });
 </script>