Ext.ux.ToolCopyButton

Outline

For more information see Ext.ux.CopyButton

This is a tool version of Ext.ux.CopyButton.

Code

Examples

Basic Usage

Here is a basic usage example.

HTML

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

JavaScript

// set the copy value in the constructor
new Ext.Panel({
    renderTo: Ext.get('panel'),
    title: 'Panel tool copy button',
    closeable: false,
    plugins: [
        new Ext.ux.ToolCopyButton({
            value: 'Copy Text'
        })
    ],
    html: 'Panel body'
});

Result

Grid Copy CSV Button

I've also written an override to the Ext.grid.GridPanel which allows you to get the grid data as CSV.

This will allow you to use the override method on the ToolCopyButton to copy the grid to the clipboard as CSV.

HTML

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

JavaScript

var data = [{
    "start":"2007-02-13",
    "name":"Ted Wilson, ManO",
    "email":"ted.wilson, mano@exttest.com",
    "active":true,
    "salary":51000
},{
    "start":"2007-02-20",
    "name":"Mike Williams",
    "email":"mike.williams@exttest.com",
    "active":true,
    "salary":62000
},{
    "start":"2007-02-04",
    "name":"Sara Train",
    "email":"sara.train@exttest.com",
    "active":true,
    "salary":72000
},{
    "start":"2007-03-13",
    "name":"Mark Black",
    "email":"mark.black@exttest.com",
    "active":true,
    "salary":53000
}];

new Ext.grid.GridPanel({
    renderTo: Ext.get('grid'),
    title: 'Employees',
    height: 300,
    width: 300,
    plugins: new Ext.ux.ToolCopyButton({
        getValue: function() {
            return this.panel.getCsvData();
        }
    }),
    tools: [{
        id: 'save',
        handler: function(event, toolEl, panel) {
            var form = Ext.getBody().createChild({
                tag: 'form',
                cls: 'x-hidden'
            });
            Ext.Ajax.request({
                url: 'download.php',
                form: form,
                isUpload: true,
                params: {
                    content: panel.getCsvData()
                }
            });
            form.remove();
        }
    }],
    store: new Ext.data.JsonStore({
        fields: [{name: 'start', type: 'date', dateFormat: 'Y-m-d'}, 'name', 'email', 'active', 'salary'],
        data: data
    }),
    stripeRows: true,
    selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
    columns: [
        {id: 'name', header: 'Name', sortable: true, dataIndex: 'name'},
        {header: 'Start', width: 100, sortable: true, dataIndex: 'start', renderer: Ext.util.Format.dateRenderer('Y-m-d')},
        {header: 'Salary', width: 60, sortable: true, dataIndex: 'salary'}
    ]
});

I've also added a save button. What this does is send that generated CSV data and posts it back to the server. Which just returns it in a format that the browser will download.

I do this because the only other way to make the browser download content generated from JavaScript is to use the data uri scheme, which doesn't cover all browsers.

Result

More Examples

A more complex example can be found here