1. #31
    Ext User
    Join Date
    Oct 2007
    Posts
    19
    Vote Rating
    0
    gillou01 is on a distinguished road

      0  

    Default


    Thanks!!

  2. #32
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    181
    Vote Rating
    51
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Question


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

  3. #33
    Ext User
    Join Date
    Nov 2009
    Posts
    56
    Vote Rating
    0
    scblue is on a distinguished road

      0  

    Default


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

    Code:
    /*!
     * 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!

  4. #34
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Have you included the Override.js file as well?

  5. #35
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


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

  6. #36
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


    I resolved the problem.
    I added this snippet to define "Ext.isFunction"
    Code:
    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

  7. #37
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    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.

    Code:
                            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.

  8. #38
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    164
    Vote Rating
    1
    michael melsen is on a distinguished road

      0  

    Default


    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

  9. #39
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    New York, NY
    Posts
    92
    Vote Rating
    0
    imran is on a distinguished road

      0  

    Default


    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:

    Code:
        //  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

  10. #40
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    New York, NY
    Posts
    92
    Vote Rating
    0
    imran is on a distinguished road

      0  

    Default


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

    Quote Originally Posted by genio View Post
    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.

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