Ext.ux.CopyButton

Outline

The ability to copy text to the clipboard in browsers is somewhat limited, due to security restrictions.

Using an invisible flash movie and library from the ZeroClipboard project it's once again possible.

Requirements

• Adobe Flash Flash Player Flash 9, 10
• ExtJS
• ZeroClipboard

The button should work on most major browsers including IE6.

Code

Examples

Basic Usage

Here is a basic usage example.

HTML

<!-- a placeholder for the button -->
<div id="copy-button"></div>

JavaScript

// set the copy value in the constructor
new Ext.ux.CopyButton({
    renderTo: Ext.get('copy-button'),
    text: 'Copy To Clipboard',
    value: 'This text has been copied to the clipboard'
});

Result

Complex Usage

It's also possible to override the getValue method.

HTML

<!-- a placeholder for the button -->
<div id="copy-button2"></div>

JavaScript

// no set value provided, instead overriding the getValue method,
// providing the time/date which is called everytime the button is clicked
new Ext.ux.CopyButton({
    renderTo: Ext.get('copy-button2'),
    text: 'Copy Time/Date',
    getValue: function() {
        return new Date;
    }
});

Result

More Examples

A more complex example can be found here