ExtJS的Grid中的文本如何能够选择并复制到剪贴板

最新推荐文章于 2024-03-26 10:13:36 发布

原创最新推荐文章于 2024-03-26 10:13:36 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs grid

ExtJS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何利用ExtJS3.4在网格中通过鼠标操作选择文本，并将其复制到剪贴板的方法。通过添加额外的CSS规则和修改模板代码，实现在IE8、Firefox11、Chrome18等浏览器下的兼容性与功能。适合前端开发人员参考。

参考自 http://www.sencha.com/learn/grid-faq,
How to select text in the grid (with the mouse) so that it can be copied to the clipboard

First, add an extra CSS rule:


<style type="text/css">
        .x-selectable, .x-selectable * {
               -moz-user-select: text!important;
               -khtml-user-select: text!important;
        }
</style>

Next use this as default behavior


if (!Ext.grid.GridView.prototype.templates) {
   Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
   '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"
               style="{style}" tabIndex="0" {cellAttr}>',
   '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
   '</td>'
);

我用的是ExtJS3.4，在IE8，Firefox11,Chrome18下均测试通过。