How to copy and paste the value of a grid's cell in a Ext JS app

[gzambrano]

I would like to be able to copy and paste the text from cells in a grid of a Ext JS app.

We are using Sencha Architect Version 4.2.4.389, Framework Ext JS 6.5.3 Modern.

I have tried the following in the grid:

viewConfig : {
enableTextSelection: true
}

selModel: {
type: 'spreadsheet'
},
plugins: [
{
type: 'clipboard'
}
]

None of this has worked. The app doesn't crash but it does not allow me to copy any text.

Can someone tell me how to make this work?

Thanks

[Johnny Major]

For ExtJs Modern you need to set the grids 'selectable' config and for the plugin you probably want to set the clipboard to text;

When on a mobile device there isn't a right click/ctl copy so you will have to do that yourself. One way would be on the selection change place it in the systems clipboard;

Example Fiddle

Source

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
                fields: ['name', 'email', 'country'],
                data: [{
                    name: 'a',
                    email: 'a@abc.com',
                    country: 'United States'
                }, {
                    name: 'b',
                    email: 'b@abc.com',
                    country: 'Australia'
                }, {
                    name: 'c',
                    email: 'c@abc.com',
                    country: 'Germany'
                }]
            }),
            /**
             * copy the selected cells to the clipboard
             * @param cmp
             */
            selectionChange = function (cmp) {
                var me = this,
                    copyToClipboard = function (text) {
                        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
                            var textarea = document.createElement('textarea');
                            textarea.textContent = text;
                            textarea.style.position = 'fixed';
                            document.body.appendChild(textarea);
                            textarea.select();

                            try {
                                document.execCommand('copy');
                            } catch (ex) {
                                console.warn('Copy to clipboard failed.', ex);
                            } finally {
                                document.body.removeChild(textarea);
                            }
                        }
                    },
                    cellData = cmp.getPlugin('clipboard').getCellData();

                if (cellData) {
                    try {
                        copyToClipboard(cellData);

                        cellData = cellData.replaceAll('\t', '     ');
                        cellData = cellData.replaceAll('\n', '<br>');
                        cmp.up('panel').getViewModel().set('selection', cellData);
                    } catch (e) {
                        //
                    }
                }
            };

        Ext.create('Ext.Panel', {
            title: 'Cell Selection To Clipboard',
            renderTo: Ext.getBody(),
            fullscreen: true,
            viewModel: {
                selection: null
            },
            items: [{
                xtype: 'grid',
                plugins: {
                    clipboard: {
                        format: 'text'
                    }
                },
                selectable: {
                    mode: 'multi',
                    drag: true,
                    cells: true,
                    columns: false,
                    rows: true,
                    extensible: true,
                    listeners: {
                        selectionchange: {
                            buffer: 350,
                            fn: selectionChange
                        }
                    }
                },
                store: store,
                columns: [{
                    text: 'Name',
                    flex: 1,
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    flex: 1,
                    dataIndex: 'email'
                }, {
                    text: 'Country',
                    flex: 1,
                    dataIndex: 'country'
                }],
                height: 200
            }],
            bbar: [{
                xtype: 'label',
                bind: {
                    html: '<b>Clipboard</b><br>{selection}'
                }
            }]
        })
    }
});

[gzambrano]

Johnny Major
Thank you Johnny. :D
This code worked very well for desktop and mobile.

Much appreciated.