Extjs页面实现行复制功能

 在使用Extjs编写页面过程中，需要使用到行复制。但是Extjs没有好的支持。

自己做了一个扩展。需要用到一个复制内容到剪贴板的js文件。

主要代码：

重写GridPanel,打开鼠标右键事件，添加一个右键菜单。

其中Clipboard是需要加载的js。

Ext.override(Ext.grid.GridPanel, {
    stripeRows: true,
    columnLines: true,
    loadMask: {
        msg: '正在加载数据，请稍后...'
    },

    contextmenu: new Ext.menu.Menu({
        customValue: '',
        items: [{
            xtype: 'button',
            cls: 'btn',
            text: '复制',
            handler: function (btn, e) {
                new Clipboard('.btn', {
                    text: function () {
                        return btn.ownerCt.customValue;
                    }
                });
                btn.ownerCt.hide();
            }
        }]

    }),

    listeners: {
        'rowcontextmenu': function (grid, rowIndex, e) {
            //取消默认的浏览器右键事件
            e.preventDefault();

            //将点中的那行选中
            grid.getSelectionModel().selectRow(rowIndex);

            // 获取选中行的内容
            record = grid.getStore().getAt(rowIndex);

            // 将选中行内容push到一个数组
            var fieldArr = [];
            record.fields.eachKey(function (item) {
                fieldArr.push(record.get(item));
            });

            // 赋值
            grid.contextmenu.customValue =fieldArr.join('     ');

            //在选中的那行显示按钮
            grid.contextmenu.showAt(e.getXY());
        }
    }
});

效果图如下:

复制后用粘贴快捷键就可以将复制的内容粘贴到其他地方了。

附上需要用的js文件下载地址： https://clipboardjs.com/