handling a paste event in an editable grid.

[mbudm]

Hi there,

I am attempting to create an ExtJs grid that can receive pasted tabular data.

So far I'm picking up the 'paste' event when the grid header or column headers have focus but when a cell is clicked then the 'paste' event is no longer captured.

I had a look at the markup and it's clear that what happens is the CellEditor takes foxus when a user is editing the cell. This is of course not part of the grid, hence the 'paste' event doesn't bubble up.

So I figured that the thing to do is add another 'paste' listener to the cell editor when it is created, and then remove this listener when the editing is finished.

So how do I listen to the paste events that are being captured by the celleditor input field?

Here is a cut down version of my code, this is only tested in Chrome (I don't think all brower support the paste event yet).

I have attempted to retrieve the field via the CellEditor class using a method I discovered - ed.getFocusEl(); But this didn't work and the docs say not to rely on Ext.grid.cellEditor.


var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
var myStore = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: [
'company',
{name: 'price', type: 'float'}
],
data:myData
});

var gridEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToMoveEditor: 1,
listeners:{
beforeedit: function( editor, e, eOpts){
//attempting to get at the input field via CellEditor
var ed = editor.getEditor(e.record,e.column);
var input = ed.getFocusEl();
console.log('input:'+input); //doesn't work - returns undefined
}
}
});
var myGrid = Ext.create('Ext.grid.Panel', {
id:'mygrid',
store: myStore,
columns: [{
text: 'Company',
editor: 'textfield',
dataIndex: 'company',
flex:1
},{
text: 'Price',
editor: 'textfield',
dataIndex: 'price',
flex:1
}],
title: 'Company Share Prices',
selType: 'rowmodel',
tbar: [{
text: 'Add Row',
handler : function() {
gridEditing.cancelEdit();


// Create a model instance
var r = [''];


myStore.insert(0, r);
gridEditing.startEdit(0, 0);
}
}, {
itemId: 'removeRow',
text: 'Remove Row',
handler: function() {
var sm = myGrid.getSelectionModel();
gridEditing.cancelEdit();
myStore.remove(sm.getSelection());
if (myStore.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [gridEditing],
listeners: {
'selectionchange': function(view, records) {
myGrid.down('#removeRow').setDisabled(!records.length);
},
paste: {
element: 'el',
fn: function(){ console.log('pasted event captured'); }
}
}
});
this.down().add(myGrid);

[mitchellsimoens]

I would create an extension of the textfield to add a listener for the paste event.

[mbudm]

I would create an extension of the textfield to add a listener for the paste event.

I've decided to listen to paste events on the document body instead, as I'll need to populate the grid when a cell is selected, not just when a cell is actively being edited.

[dawesi]

check out vinylfox's github, provides exmples both ways:

To Excel
https://github.com/VinylFox/ExtJS.ux.DataDrag

From Excel
https://github.com/VinylFox/ExtJS.ux.DataDrop