Results 1 to 8 of 8

Thread: Ext.ux.CSVImport, import data from CSV to Ext.grid.GridPanel

  1. #1
    Sencha Premium Member goldledoigt's Avatar
    Join Date
    Jul 2007
    Location
    Paris, France
    Posts
    56
    Vote Rating
    0
      0  

    Default Ext.ux.CSVImport, import data from CSV to Ext.grid.GridPanel

    Hello all,

    This is a grid's plugin to import data from CSV to grid's store.
    It uses HTML5 native drag & drop and FileReader.
    This plugin works with FireFox 3.6+ and Chrome 6 (dev channel) only.

    Sources with example on GitHub : http://github.com/goldledoigt/Ext.ux.grid.CSVImport

    PHP Code:
    Ext.ns("Ext.ux.grid");

    Ext.ux.grid.CSVImport = function() {

        var 
    grid null;
        var 
    strDelimiter ",";
        var 
    endLine "\n";

        function 
    csvToArray(strDatastrDelimiter){
            var 
    arrData = [[]];
            var 
    arrMatches null;
            var 
    objPattern = new RegExp((
                
    "(\\" strDelimiter "|\\r?\\n|\\r|^)" +
                
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
                
    "([^\"\\" strDelimiter "\\r\\n]*))"
            
    ), "gi");

            while (
    arrMatches objPattern.exec(strData)) {
                var 
    strMatchedDelimiter arrMatches];
                if (
    strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {
                    
    arrData.push([]);
                }
                if (
    arrMatches[2]) {
                    var 
    strMatchedValue arrMatches].replace(new RegExp"\"\"""g" ),"\"");
                } else {
                    var 
    strMatchedValue arrMatches];
                }
                
    arrDataarrData.length ].push(strMatchedValue);
            }

            return(
    arrData);
        }

        function 
    addRow(row) {
            
    row csvToArray(rowstrDelimiter);
            
    grid.store.loadData(rowtrue);
        }

        function 
    processFile(file) {
            var 
    reader = new FileReader();
            
    reader.onload = function(e) {
                var 
    rows atob(e.target.result.split(",")[1]).split(endLine);
                
    Ext.each(rowsaddRow);
                
    grid.fireEvent("read"gridfilerowsreader);
            };
            
    reader.readAsDataURL(file);
        }

        function 
    onFilesDrop(e) {
            
    e.stopPropagation();
            
    e.preventDefault();
            var 
    files e.browserEvent.dataTransfer.files;
            if (
                
    files && files.length &&
                
    grid.fireEvent("beforedrop"gridfiles) !== false
            
    ) {
                
    // no defer, no load mask...
                
    (function() {
                    
    Ext.each(filesprocessFile);
                    
    grid.fireEvent("drop"gridfiles);
                }).
    defer(50);
            }
        }

        function 
    initDD() {
            
    grid.body.on({
                
    scope:grid
                
    ,dragover:function(e) {
                    
    e.stopPropagation();
                    
    e.preventDefault();
                    if (!
    Ext.isGecko) { // prevents drop in FF ;-(
                      
    e.browserEvent.dataTransfer.dropEffect 'copy';
                    }
                    
    grid.fireEvent("dragstart"grid);
                    return;
                }
                ,
    dragleave:function(e) {
                    
    e.stopPropagation();
                    
    e.preventDefault();
                    
    grid.fireEvent("dragstop"grid);
                    return;
                }
                ,
    drop:onFilesDrop
            
    });
        }

        function 
    init(component) {
            
    grid component;
            
    grid.on({afterrender:initDD})
        }
        
        return {
    init:init};

    };


    Ext.onReady(function() {

        
    // BASIC

        
    new Ext.grid.GridPanel({
            
    renderTo:Ext.getBody()
            ,
    width:500
            
    ,height:400
            
    ,plugins:[new Ext.ux.grid.CSVImport()]
            ,
    store:new Ext.data.ArrayStore({
                
    fields:["a""b""c""d""e""f""g""h""i"]
            })
            ,
    columns:[
                {
    dataIndex:"a"header:"A"}
                ,{
    dataIndex:"b"header:"B"}
                ,{
    dataIndex:"c"header:"C"}
                ,{
    dataIndex:"d"header:"D"}
                ,{
    dataIndex:"e"header:"E"}
                ,{
    dataIndex:"f"header:"F"}
                ,{
    dataIndex:"g"header:"G"}
                ,{
    dataIndex:"h"header:"H"}
                ,{
    dataIndex:"i"header:"I"}
            ]
        });

        
    // ADVANCED

        
    new Ext.grid.GridPanel({
            
    renderTo:Ext.getBody()
            ,
    width:500
            
    ,height:400
            
    ,plugins:[new Ext.ux.grid.CSVImport()]
            ,
    store:new Ext.data.ArrayStore({
                
    fields:["a""b""c""d""e""f""g""h""i"]
            })
            ,
    columns:[
                {
    dataIndex:"a"header:"A"}
                ,{
    dataIndex:"b"header:"B"}
                ,{
    dataIndex:"c"header:"C"}
                ,{
    dataIndex:"d"header:"D"}
                ,{
    dataIndex:"e"header:"E"}
                ,{
    dataIndex:"f"header:"F"}
                ,{
    dataIndex:"g"header:"G"}
                ,{
    dataIndex:"h"header:"H"}
                ,{
    dataIndex:"i"header:"I"}
            ]
            ,
    listeners:{
                
    dragstart:function(grid) {
                    
    grid.view.scroller.setStyle("background-color""#FFFDF6");
                }
                ,
    dragstop:function(grid) {
                    
    grid.view.scroller.setStyle("background-color""#FFFFFF");
                }
                ,
    beforedrop:function(gridfiles) {
                    if (!
    grid.mask) {
                        
    grid.mask = new Ext.LoadMask(
                            
    grid.body
                            
    ,{msg:"Loading data, please wait..."}
                        );
                    }
                    
    grid.mask.show();
                    
    // return false to cancel import
                
    }
                ,
    drop:function(gridfiles) {
                    
    grid.view.scroller.setStyle("background-color""#FFFFFF");
                }
                ,
    read:function(gridfilecontentreader) {
                    
    grid.mask.hide();
                }
            }
        });

    }); 
    Drop CSV file over grid's body, wait a bit, and voila
    Last edited by goldledoigt; 13 Aug 2010 at 3:38 PM. Reason: update source + github link
    Goldledoigt

  2. #2
    Sencha User sosy's Avatar
    Join Date
    Jun 2010
    Location
    Bremen, but Dutch origin
    Posts
    64
    Vote Rating
    0
      0  

    Default

    I will give it a try today. What i was wondering about is, why (and it seems to happen often by others to) you dont put an simple demo online, where people can give it a try. It often says more than 100 rows of source.

    Regards
    Sosy
    I prefer an sister in the red-light district, to an brother with internet explorer..

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    582
    Vote Rating
    143
      0  

    Default

    Thanks for sharing.

    But I thought I'd mention that the plugin as it exists probably won't work for quoted strings (strings containing a " character, and possibly a , character).

    You could try integrating the parsing logic from http://stackoverflow.com/questions/1...parse-csv-data

  4. #4
    Sencha User ashaihullin's Avatar
    Join Date
    Jan 2010
    Location
    Kyrgyzstan, Bishkek
    Posts
    67
    Vote Rating
    0
      0  

    Default

    very usefull if it work... gonna try little later... thanx

  5. #5
    Sencha Premium Member goldledoigt's Avatar
    Join Date
    Jul 2007
    Location
    Paris, France
    Posts
    56
    Vote Rating
    0
      0  

    Default

    It now works with quoted strings.
    Thanks to you Joeri and to kirtan.

    code updated.
    Goldledoigt

  6. #6
    Ext User verbi's Avatar
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
      0  

    Default

    do you have example with browse file (not dragDrop)? thankyou.

  7. #7
    Sencha Premium Member goldledoigt's Avatar
    Join Date
    Jul 2007
    Location
    Paris, France
    Posts
    56
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by verbi View Post
    do you have example with browse file (not dragDrop)? thankyou.
    The same thing can't work without HTML5 D&D. The system D&D allows the browser to read the file content. As far as I know, file browsing upload process can't do that, you will have to wait for the file to be uploaded before you could read the content.

    If you are looking for a complete upload ExtJS object supporting file browsing + D&D you can take a look to:
    my Ext.ux.upload plugin
    Goldledoigt

  8. #8
    Ext User verbi's Avatar
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by goldledoigt View Post
    The same thing can't work without HTML5 D&D. The system D&D allows the browser to read the file content. As far as I know, file browsing upload process can't do that, you will have to wait for the file to be uploaded before you could read the content.

    If you are looking for a complete upload ExtJS object supporting file browsing + D&D you can take a look to:
    my Ext.ux.upload plugin
    Thankyou gold, HTML5 D&D is great method.
    Just in my case ancient browse method needed. If i able to make own project with own specification i will use HTML5 D&D.
    still learning from your link (my Ext.ux.upload plugin).

Similar Threads

  1. Help : how to import csv file to grid?
    By pregool in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 1 May 2013, 6:37 AM
  2. Export Pdf|Xls|Csv from ext js grid
    By veerai2i in forum Ext 3.x: Help & Discussion
    Replies: 14
    Last Post: 1 Nov 2012, 9:29 AM
  3. CSV Import & JSUnit TestPanel screencast
    By Ronaldo in forum Community Discussion
    Replies: 12
    Last Post: 12 Apr 2012, 6:39 PM
  4. export the grid data to CSV file
    By ssawant in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 5 Jul 2010, 5:49 PM
  5. Grid import XML data help
    By Bobafart in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Feb 2007, 1:04 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •