Extjs页面实现行复制功能

最新推荐文章于 2021-08-19 16:23:20 发布

yyyyyqc

最新推荐文章于 2021-08-19 16:23:20 发布

阅读量6k

点赞数

分类专栏： Extjs 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/yqc921015/article/details/51701116

版权

这篇博客介绍了在Extjs开发中如何实现行复制功能，由于Extjs本身不提供直接支持，作者通过编写扩展并利用Clipboard.js库，实现了右键菜单触发的复制功能。用户可以复制GridPanel中的内容，并在其他地方通过粘贴快捷键使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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());
        }
    }
});

</pre><pre name="code" class="javascript">效果图如下:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA68AAABjCAYAAAB0Wja7AAAgAElEQVR4Ae2de3hV1Zn/v5ALETWglUvnBzJ4K0XBpkyQ8pObCooljxmN4g1Qq6ijaPsM4vSh0inoH6X4TCs4KjgoUGoRtDhBRbByay2FxgwXsV4QI4wCASVBIAFC5nn3Oe8566zsvc8+yTnJycl384S11rve911rfda+nHevffZpt2vv0XoAWLWtGhOGn4MvDx6XYmQT+eCLTouUzUz2Uz9Ht+6dcVpOHU5+vgtHvzhkVkfz7dujQ59LUF1zHB9/8T66/uL30TqX3B3XX4EXX33HpSZWZOpJXjbbTuWxlu4ltXXz62ah+m51lJEACZAACZAACZAACZAACZAACSSPQHZTXNX1L8TBFYvx/24ci7ptf0fOmTk4cfhEjMu6+nqgPgs5/3gBKl55GnlX3xZTrwUzYFSZpF5yU0fzbsGkKUvEl7YtqelD2xJf3EiABEiABEiABEiABEiABEiABJqHQKDgVeJPt62+/0Ac+ds7OLh2Dc6+5oc4VlqKdllZqK+rQx3aAXWnAGQj/9oxqPjj6zjW8XScM/Bq2P7uvOEKvPDKOzFy1RG5BIqSmpufjehpvdpoWf3aci1rqm2KnW2jOl5yrWdKAiRAAiRAAiRAAiRAAiRAAiSQHAKBglfPps7qClx9M/a+/DTq3lqNLlcX4fhnO3F85060O34KHS6+ALk9emP36lJUfLMbZ034GbLP6RHjToPKGKFVkMDV1DPzlqprUfRl09RWcvNnBstedrYflkmABEiABEiABEiABEiABEiABFJDIGDw6rH0CqD9JYXIqr8PX/5hHg4sm4cefX6A3Ev/yent0S8+x9ZXnkbtGWc4gWvHghEAYn298MofY2R33nBleKTuelJv24iByBoGmSEfIX1vgKE2o+3Z/t3sbRtv76whARIgARIgARIgARIgARIgARJoKoF2QV7YNOiCvLjtnDqwF8ffewfHylajruog6k+cQH3nzsgrHIWOA0Yiu0vsimtch1QgARIgARIgARIgARIgARIgARIggTCBgCuv8Xm1P6c78kbd6vzF16YGCZAACZAACZAACZAACZAACZAACQQnECh45YuJggOlJgmQAAmQAAmQAAmQAAmQAAmQQPIJtE++S3okARIgARIgARIgARIgARIgARIggeQSCLbyar1kKbldoDcSIAESIAESIAESIAESIAESIAES8CcQLHiNvojX3xtrSYAESIAESIAESIAESIAESIAESCAFBPjYcAqg0iUJkAAJkAAJkAAJkAAJkAAJkEByCQRaed38aW1yW6U3EiABEiABEiABEiABEiABEiABEkiAQKDg9Y6hZyXgkqokQAIkQAIkQAIkQAIkQAIkQAIkkFwCgR8bPnLkSHJbtrx98MEHSEUbqfJrdZ/FDCPA/SbDJjTNhsP9q3knhLybl3fQ1jgvQUm1bj3Oc+ueP/aeBBIh0BzHe+DgNZGOU5cESIAESIAESIAESIAESIAESIAEkkmAwWsyadIXCZAACZAACZAACZAACZAACZBASggweE0JVjolARIgARIgARIgARIgARIgARJIJgEGr8mkSV8kQAIkQAIkQAIkQAIkQAIkQAIpIcDg1cLaoUMHSxJb9KuXOv2LtYIjt2Va9vMpOvHq1Y9batuaZcl7/bn5oixKwOYmNTbbqHaozrYxy6auV97076Wj8kR01YZpehFwm0M3md3rIDq2DcuxBBJl6Kff2LrYHrEkBPxYuhHy00+0zta3y9q+m9yUmXm10VTqzD+Rm2U/W/WRCWm8cfrVm7wygQXHQAIk0JBAoJ/KaWiWesnT//mfCTfywL/8S8I2poGc9Gpra52LhaRum1lvn0C9bIL4lbZMf9qO9sGus/Wl7NW++lAd7Y+XvtmWact8lIDJzualfKPa/nPjZm/aSt5sT8pubZg2oh9Px9RnngTaKgH7+FMObnL7OFRdv+

最低0.47元/天解锁文章