Best way to block CTRL-V against a grid

Question

Using the following fiddler https://fiddle.sencha.com/#fiddle/1frn

You can select cell, do CTRL-C, then select different cell, and do CTRL-V and you see the values have been copied.

How do I block CTRL-V?

Is overriding clipboard.validateAction the best way?

privates : {
    validateAction : function(event) {
         var view =       this.getCmp().getView();
If(view.actionableMode){
return false;
}
}
}

Its not clear to me why a common function like validateAction would be private...

As a programmar and end-user, why do you want to torture the general population by removing paste functionality? Just make the column marked as "non-editable". The plugin you use (`cellediting`) likely enables contenteditable on the tags. What are you trying to achieve which allows normal input but not pasted input, or are you trying to block input overall? — Rogue, Sep 04 '17 at 12:55
Maybe this will help: https://stackoverflow.com/questions/5510129/how-to-disable-paste-ctrlv-with-jquery — , Sep 04 '17 at 12:55
Hi do you mean depending of the state of your application/grid, you want CTRL-V against the Grid to be blocked but it's OK if done outside the app e.g Excel, but CTRL-C can always work?? — Brian Mogambi, Sep 04 '17 at 12:59
@Brian yes, i need to control the ability to copy and paste values on the grid dependinh on its statw — user8558735, Sep 04 '17 at 13:01

score 0 · Accepted Answer · answered Sep 04 '17 at 13:07

You can use this override/sample code to control the ability to paste depending on the current state of the grid:

Ext.define('Fiddle.grid.plugin.Clipboard',{
override: 'Ext.grid.plugin.Clipboard',


beforepaste: Ext.emptyFn,

mixins: [
    'Ext.mixin.Observable'
],

constructor: function(config) {
    var me = this;

    me.callParent([config]);
    me.mixins.observable.constructor.call(me);
},

privates : {
    onPaste: function (keyCode, event) {
        var me = this,
            sharedData = me.shared.data,
            source = me.getSource(),
            i, n, s;

        if (me.validateAction(event) === false) {
            return;
        }


        if (me.fireEvent('beforepaste',keyCode,event,me.cmp) !== false) {                            

            if (source) {
                for (i = 0, n = source.length; i < n; ++i) {
                    s = source[i];


                    if (s === 'system') {
                        // get the format used by the system clipboard. 
                        s = me.getSystem();
                        me.pasteClipboardData(s);
                        break;
                    } else if (sharedData && (s in sharedData)) {
                        me.doPaste(s, sharedData[s]);
                        break;
                    }
                }
            }
        }
    }
}
});


Ext.define('UserController', {
extend : 'Ext.app.ViewController',
alias: 'controller.users',

onBeforePaste:function(keyCode,event,grid){
    //Perform custom logic
    console.log(grid)
    return false;
}
});


Ext.application({
name: 'Fiddle',


launch: function() {
    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [{
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: 'bart@simpsons.com',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: 'homer@simpsons.com',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: 'marge@simpsons.com',
            phone: '555-222-1254'
        }]
    });


    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        controller:'users',
        width: 400,
        renderTo: Ext.getBody(),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 2
        },
        selModel: {
            type: 'spreadsheet',
            rowNumbererHeaderWidth: 0
        },
        plugins: [{
            ptype: 'clipboard',
            listeners: {
                beforepaste: 'onBeforePaste'
            }
        }],
        listeners: {
            selectionchange: function(grid, selection, eOpts) {
                var store = grid.getStore();
            }
        }
    });
}
});

Best way to block CTRL-V against a grid

1 Answers1