Ext.ux.grid.DataDrop

[gillou01]

Thanks!!

[loiane]

Congrats for the great work you guys did on this plugin. I'm a huge fan already!

[scblue]

I have a simple form with xtype grid to test this plugin.
However, I can't manage to drop the data onto the grid.

/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();

    var data = [
            ['abc'],
            ['def'],
            ['ghi']
        ];

        teststore = new Ext.data.SimpleStore({
            fields: [
                {name: 'a'}
            ]
        });

        teststore.loadData(data);

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Csv Form',
        bodyStyle:'padding:5px 5px 0',
        height: 300,
        width: 350,
        //defaults: {width: 230},
        //defaultType: 'textfield',
        items: [{
            xtype: 'grid',
            height: 300,
            plugins: [Ext.ux.grid.DataDrop],
            editable: true,
            store: teststore,
            columns: [
                { id: 'a', header: 'A', sortable: true, dataIndex: 'a'}
                //{ id: 'b', header: 'B', sortable: true },
                //{ id: 'c', header: 'C', sortable: true }
            ]
}],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);

});

Is there something that I am missing?
There are no errors on firebug, the data's just not dropping.

Thanks!

[VinylFox]

Have you included the Override.js file as well?

[issameddine]

HEllo, great job
I have one question, can I use it with Ext2.x
Thanks

[issameddine]

I resolved the problem.
I added this snippet to define "Ext.isFunction"

Ext.isFunction = function(fn){
   return (typeof fn == 'function');
};

the problem now, it when the number of columns selected in the file is greater than those of the grid. why they should be equal.
Thanks

[hallikpapa]

Will this work in a window? I am trying to drag to a test grid I put in a window, and it only seems to hit the override class when I drop in a specific spot, but then I get a lastT is undefined.

                        me.hide();
                        t = Ext.get(document.elementFromPoint(x, y));
                        me.show();
                        if (!t) {
                            lastT.fireEvent('mouseout'); ///UNDEFINED HERE

I am guessing cause t is undefined, where it can't get the window element from the x/y points? But again it's a guess. I am going to do more testing to try and see what's going on. I have only been able to hit a breakpoint twice, every other time I drag into the grid, it forwards to google doing a search with the highlighted excel contents.

<edit> Yes, I tested successfully with a grid rendered to the document body, but when trying to drop on the same grid in a Ext.Window, it doesn't capture the text, it pastes whatever text I am copying into the url bar and does a google search for that text...Weird, because from what I read about document.elementFromPoint on your blog, it should be detecting the window...I will keep looking.

<edit2> I maximized the window, and did a drop, and it worked great! I will try and figure out how it was missing my drop even though I was doing it in the center of the grid. This is the greatest plugin. Impressive work guys.

[michael melsen]

Hi VinylFox,

great plugin! Thanks for it.

I'm trying to embed it in my grid and it works great. However I'm trying to add events to it so I can listen when the data is dropped so I can add a modal window that shows the differences between the original records in the store and the possibly different records from the excel file.

As the plugin is seen as an object that does not extend observable or anything else, I can't listen for events on it. Do you have an idea about how to extend the datadrop plugin in order to be notified when the data is dropped to perform popup a modal window?

kind regards,

Michael

[imran]

Cool plugin!

BTW, when dropping a large number of rows I noticed that each Record was being added, focused upon, then highlighted - becoming uber slow, esp when used with BufferView.

As an improvement, I slightly modified the dataDropped function to add an array of Records to the store, outside the for loop -vs- adding incrementally for each row:

    //  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) {
                var recs = new Array();
                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++) {
                            var fldName = cols[k].dataIndex;
                            var fld = fields.item(fldName);
                            data[fldName] = fld ? fld.convert(vals[k]) : vals[k];
                        }
                        var newRec = new Record(data);
                        recs.push(newRec);
                    }
                }

                store.add(recs);
                var idx = store.data.length-1;
                this.view.focusRow(idx);
                Ext.get(this.view.getRow(idx)).highlight();

                resizeDropArea.call(this);
            }
        }
    }

- Imran

[imran]

This fix should definitely make its way into the Google Code repo. I encountered the same problem

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);
        }
    };
})();