Ext.ux.grid.DataDrop

[VinylFox]

Works nicely, but I'm getting an error message (just added plugins: [Ext.ux.grid.DataDrop] in the grid config)

Uncaught TypeError: Cannot read property '0' of null at ext-base-debug.js:3482

The data does appear in the grid, but the data isn't sent to the server (added newRec.markDirty(); in function dataDropped() before adding to the store. The dirty marks do appear as well, but data is still not sent (getting data to be sent using getModifiedRecords) =/

You sure your using 3.x ? if so, what version exactly?

If you have an example page with this problem, that would help.

[Thomas Triplet]

Yes, I am using version 3.0.0

I dont have the page online, but bellow are relevant pieces of code:

Passport.spreadsheet_panel = new Ext.grid.EditorGridPanel( {
	id: 'spreadsheet_panel',
	title:"Substrates",
	iconCls: 'icon-grid',
	store: Passport.spreadsheet_store,
	cm: cmSubstrates,
	bbar: pagingBar,
	autoExpandColumn: 'substrates_name',
	view: new Ext.grid.GroupingView( {
		groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items": "Item"]})'
	}),
	region: 'center',
	layout: 'fit',
	stripeRows: true,
	loadMask: true,
	plugins: filters,
	autoResize: true,
	autoScroll: true,
	clicksToEdit: 1,
	columnLines: true,
	
	//plugins: [Ext.ux.grid.DataDrop],
	
	bodyCfg: {
		cls: 'x-panel-body x-panel-body-with-bbar'
	}
});

Passport.Substrate = Ext.data.Record.create( [
	{ name: 'substrate_id',				type: 'int', allowBlank :false},
	{ name: 'substrate_name', 			type: 'string', allowBlank :false},
	{ name: 'comments', 				type: 'string' },
	{ name: 'version', 				type: 'int' },
	{ name: 'history', 				type: 'string' }
]);


var cmSubstrates = new Ext.grid.ColumnModel( [
	{
		header: 'Id',
		width: 35,
		fixed:true,
		align: 'center',
		menuDisabled:true,
		sortable: true,
		groupable: false,
		editable: false,
		id: 'numberID',
		dataIndex: 'substrate_id',
		editor: new Ext.form.NumberField( {
			allowNegative: false,
			allowBlank: false,
			lazyRender: true
		})

	}, {
		header: "Substrate Name",
		sortable: false,
		groupable: false,
		width: 300,
		id: 'substrates_name',
		dataIndex: 'substrate_name',
		editor: new Ext.form.TextField( {
			allowBlank: false,
			lazyRender: true
		})

	}, {
		header: "Version",
		sortable: false,
		groupable: false,
		menuDisabled:true,
		editable: false,
		width: 50,
		fixed:true,
		align: 'center',
		id: 'substrates_version',
		dataIndex: 'version'

	}, {
		header: "Comments",
		sortable: false,
		groupable: false,
		width: 460,
		id: 'substrates_comments',
		dataIndex: 'comments',
		editor: new Ext.form.HtmlEditor( {
			height: 250,
			enableFonts: true,
			enableLists: false,
			enableLinks: true,
			enableAlignments: true,
			enableColors: true,
			allowBlank: true,
			lazyRender: true
		})

	}
]);


Passport.spreadsheet_store = new Ext.data.GroupingStore( {
	storeId: 'Passport.spreadsheet_store',
	remoteGroup: true,
	reader: new Ext.data.JsonReader( {
		root: 'results',
		idProperty: 'substrate_id',  
		totalProperty: 'number_records'
	}, Passport.Substrate),
	proxy: new Ext.data.HttpProxy({url:'php/jsoner/substrates.php'})
});


// save function, called from button in toolbar
function saveSubstrates() {
	var modifiedRecords = Passport.spreadsheet_store.getModifiedRecords();
	for (var n = 0;n < modifiedRecords.length;n++) {
		//Ajax call for each modifiedRecords[n]
	}
}

The data is very straight forward, just a spreadsheet with 5 columns, one for each of the fields defined in the Record

Thanks

[Animal]

Woww look great!

Works nicely, but I'm getting an error message (just added plugins: [Ext.ux.grid.DataDrop] in the grid config)

Uncaught TypeError: Cannot read property '0' of null at ext-base-debug.js:3482


The data does appear in the grid, but the data isn't sent to the server (added newRec.markDirty(); in function dataDropped() before adding to the store. The dirty marks do appear as well, but data is still not sent (getting data to be sent using getModifiedRecords) =/

Set it to break on all errors, then see what it's doing there.

[genio]

Hi guys,

I am seeing some strange behavious with the plugin (which is great by the way)

If I combine it with row editor, once I open up the editor I am unable to select another cell and the caret seems to dissapear to the top cornet of the grid.

So to reproduce this is what I am doing

- Double Click on cell to open Editor
- Cell is selected for edit as expected
- Move to different cell in the row and selection/focus does not respond
- I notice a sliglitly visible caret at the top left corner of the grid
- I am now unable to select any cell anymore...

Removing the DragDrop plugin will make IE behave as expected with RowEditor

This is only happening in IE, Firfox behaves as expected with BOTH PLUGINS and the ability to move between cells when the RowEdit is opened.

Any clues why this is happening? Is it the big layer in drag drop taht makes IE mess up?

Let me know

[Animal]

I suspect some work will have to be done to hide the masking div on edit start and show it again on edit end.

[genio]

does DragDrop have access to the grid itself to check this? Was wondering how difficult it is to patch... but only IE has this, Firefox behaves...

[genio]

I have noticed a bug with this plugin!

When the textarea is generate on top of the grid, it actually covers and disables the scroll bars...

I have added the size of the scroll bar to the resize function; which fixes it fixes it.

Ext.ns('Ext.ux.grid');
/**
 * @author Shea Frederick - http://www.vinylfox.com
 * @contributor Nigel (Animal) White, Andrea Giammarchi & Florian Cargoet
 * @class Ext.ux.grid.DataDrop
 * @singleton
 * <p>A plugin that allows data to be dragged into a grid from spreadsheet applications (tabular data).</p>
 * <p>Requires the Override.js file which adds mouse event forwarding capability to ExtJS</p>
 * <p>Sample Usage</p>
 * <pre><code>
 {
 xtype: 'grid',
 ...,
 plugins: [Ext.ux.grid.DataDrop],
 ...
 }
 * </code></pre>
 */
Ext.ux.grid.DataDrop = (function () {

    var lineEndRE = /\r\n|\r|\n/,
        sepRe = /\s*\t\s*/;

    //  After the GridView has been rendered, insert a static transparent textarea over it.


    function onViewRender() {
        var v = this.view;
        if (v.mainBody) {
            this.textEl = Ext.DomHelper.insertAfter(v.scroller, {
                tag: 'textarea',
                id: Ext.id(),
                value: '',
                style: {
                    'font-size': '1px',
                    border: '0px none',
                    overflow: 'hidden',
                    color: '#fff',
                    position: 'absolute',
                    top: v.mainHd.getHeight() + 'px',
                    left: '0px',
                    'background-color': '#fff',
                    margin: 0,
                    cursor: 'default'
                }
            },
            true);
            this.textEl.setOpacity(0.1);
            this.textEl.forwardMouseEvents();
            this.textEl.on({
                mouseover: function () {
                    Ext.TaskMgr.start(this.changeValueTask);
                },
                mouseout: function () {
                    Ext.TaskMgr.stop(this.changeValueTask);
                },
                scope: this
            });
            resizeDropArea.call(this);
        }
    }

    //  on GridPanel resize, keep scroller height correct to accomodate textarea.
    
    
    function resizeDropArea() {
        if (this.textEl) {
            var v = this.view,
                sc = v.scroller,
                scs = sc.getSize,
                s = {
                width: sc.dom.clientWidth - v.getScrollOffset() + 2 || (scs.width - v.getScrollOffset() + 2),
                height: sc.dom.clientHeight - v.getScrollOffset() + 2 || scs.height
            };
            this.textEl.setSize(s);
        }
    }

    //  on change of data in textarea, create a Record from the tab-delimited contents.


    function dataDropped(e, el) {
        var nv = el.value;
        el.blur();
        if (nv !== '') {
            var store = this.getStore(),
                Record = store.recordType;
            el.value = '';
            var rows = nv.split(lineEndRE),
                cols = this.getColumnModel().getColumnsBy(function (c) {
                return !c.hidden;
            }),
                fields = Record.prototype.fields;
            if (cols.length && rows.length) {
                for (var i = 0; i < rows.length; i++) {
                    var vals = rows[i].split(sepRe),
                        data = {};
                    if (vals.join('').replace(' ', '') !== '') {
                        for (var k = 0; k < vals.length && k < fields.keys.length; k++) {
                            // var fldName = cols[k].dataIndex;
                            // Change sfunction to support ALL columns rather then just visible ones
                            var fldName = fields.keys[k];
                            var fld = fields.item(fldName);
                            data[fldName] = fld ? fld.convert(vals[k]) : vals[k];
                        }
                        var newRec = new Record(data);
                        newRec.markDirty();
                        store.add(newRec);
                        var idx = store.indexOf(newRec);
                        this.view.focusRow(idx);
                        Ext.get(this.view.getRow(idx)).highlight();
                    }
                }
                resizeDropArea.call(this);
            }
        }
    }

    return {
        init: function (cmp) {
            Ext.apply(cmp, {
                changeValueTask: {
                    run: function () {
                        dataDropped.call(this, null, this.textEl.dom);
                    },
                    interval: 100,
                    scope: cmp
                },
                onResize: cmp.onResize.createSequence(resizeDropArea)
            });
            cmp.getView().afterRender = cmp.getView().afterRender.createSequence(onViewRender, cmp);
        }
    };
})();

[mnask79]

its really great job

[gillou01]

Hi Guys
I m trying to forward also the contextmenu event to my underlying grid.
So i have added the event in Animal's override :

forwardMouseEvents: function(evt) {
		var me = this,
                xy, t, lastT,
                evts = [ 'mousemove', 'mousedown', 'mouseup', 'dblclick', 'mousewheel','contextmenu' ];

So the event gets forwarded, but it also triggers the browser context menu to be displayed.
Anybody know how to prevent that?

Cheers

[Animal]

You have to stop the event (underlying method on the browser event is "preventDefault").