ExtJS 4.2 export grid data to downloadable CSV file
<p>I want to create a download button in my EXT JS panel which when click download/exports EXTJS grid into downloadable CSV file.
PS: I think we can use store data or the JSON from which i am filling data in grid store to populate data into CSV file
I have tried Ext.ux.CSVExporter but i wasn't able to use it successfully.
My current code is :</p>

<pre><code>       &lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
        &lt;title id='title'&gt;HTML Page setup Tutorial&lt;/title&gt;       
        &lt;link rel="stylesheet" type="text/css" href="ext-all.css" /&gt;       
        &lt;script type="text/javascript" src="ext-all.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="FileSaver.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="Formatter.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="CSVFormatter/CSVFormatter.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="ExcelFormatter/Cell.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="ExcelFormatter/Style.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="ExcelFormatter/Workbook.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="ExcelFormatter/Worksheet.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="ExcelFormatter/ExcelFormatter.js"&gt;&lt;/script&gt;  
        &lt;script type="text/javascript" src="Exporter.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="ExporterButton.js"&gt;&lt;/script&gt;



&lt;script type="text/javascript"&gt;
Ext.define('Ext.ux.ProgressBarPager', {

    requires: ['Ext.ProgressBar'],
    /**
     * @cfg {Number} width
     * &lt;p&gt;The default progress bar width.  Default is 225.&lt;/p&gt;
    */
    width   : 225,
    /**
     * @cfg {String} defaultText
    * &lt;p&gt;The text to display while the store is loading.  Default is 'Loading...'&lt;/p&gt;
     */
    defaultText    : 'Loading...',
    /**
     * @cfg {Object} defaultAnimCfg
     * &lt;p&gt;A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.&lt;/p&gt;
     */
    defaultAnimCfg : {
        duration: 1000,
        easing: 'bounceOut' 
    },  

    /**
     * Creates new ProgressBarPager.
     * @param {Object} config Configuration options
     */
    constructor : function(config) {
        if (config) {
            Ext.apply(this, config);
        }
    },
    //public
    init : function (parent) {
        var displayItem;
        if (parent.displayInfo) {
            this.parent = parent;

            displayItem = parent.child("#displayItem");
            if (displayItem) {
                parent.remove(displayItem, true);
            }

            this.progressBar = Ext.create('Ext.ProgressBar', {
                text    : this.defaultText,
                width   : this.width,
                animate : this.defaultAnimCfg,
                style: {
                    cursor: 'pointer'
                },
                listeners: {
                    el: {
                        scope: this,
                        click: this.handleProgressBarClick
                    }
                }
            });

            parent.displayItem = this.progressBar;

            parent.add(parent.displayItem);
            Ext.apply(parent, this.parentOverrides);
        }
    },
    // private
    // This method handles the click for the progress bar
    handleProgressBarClick : function(e){
        var parent = this.parent,
            displayItem = parent.displayItem,
            box = this.progressBar.getBox(),
            xy = e.getXY(),
            position = xy[0]- box.x,
            pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
            newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);

        parent.store.loadPage(newPage);
    },

    // private, overriddes
    parentOverrides  : {
        // private
        // This method updates the information via the progress bar.
        updateInfo : function(){
            if(this.displayItem){
                var count = this.store.getCount(),
                    pageData = this.getPageData(),
                    message = count === 0 ?
                    this.emptyMsg :
                    Ext.String.format(
                        this.displayMsg,
                        pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
                    ),
                    percentage = pageData.pageCount &gt; 0 ? (pageData.currentPage / pageData.pageCount) : 0;

                this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
            }
        }
    }
});


Ext.onReady(function() {

    var field = [];
    var columnList = [];
    var counter = {
        "levels":

            [{
            "name": "class",
            "samples": [{
                "name": "1660SH_3",
                "features": [{
                    "count": 8,
                    "name": "Bacteroidia"
                }, {
                    "count": 9,
                    "name": "Bacteroidiaa"
                },
                {
                    "count": 10,
                    "name": "Bacteroidiab"
                },
                {
                    "count": 11,
                    "name": "Bacteroidiac"
                }]
            }, {
                "name": "1660SH_4",
                "features": [{
                    "count": 5,
                    "name": "Bacteroidia"
                }, {
                    "count": 6,
                    "name": "Bacteroidiaa"
                },
                 {
                    "count": 7,
                    "name": "Bacteroidiab"
                },
                {
                    "count": 8,
                    "name": "Bacteroidiac"
                }]
            }]
        }, ]
    };
    columnList.push({
        header: "Sample v/s Feature",
        dataIndex: "Sample v/s Feature",
        width: 0.1 * Ext.getBody().getViewSize().width,
        columnLines: true,
        locked: true
    });
    field.push("Sample v/s Feature");
    for (var p = 0; p &lt; Object.keys(counter.levels[0].samples).length; p++) {

        columnList.push({
            header: counter.levels[0].samples[p].name,
            dataIndex: counter.levels[0].samples[p].name,
            flex: 1,
            columnLines: true
        });
        field.push(counter.levels[0].samples[p].name);
    }

    if (counter.levels[0].name == 'class') {
      var mydata=[];
        for (var p = 0; p &lt; Object.keys(counter.levels[0].samples[0].features).length; p++)
         {
            var s = [];
            s["Sample v/s Feature"] = '&lt;b&gt;' + counter.levels[0].samples[0].features[p].name + '&lt;/b&gt;';
            for (var j = 0; j &lt; Object.keys(counter.levels[0].samples).length; j++) 
            {
                s[counter.levels[0].samples[j].name] = counter.levels[0].samples[j].features[p].count;
            }
            mydata.push(s);

        }

        var store = Ext.create('Ext.data.ArrayStore', {
                 autoLoad: false,
                 pageSize : 2,

                fields: field,
                data: {
                    count:mydata.length,
                    data:mydata
                },
                proxy:{
                    type:"memory",
                     enablePaging: true,
                    data:mydata,
                    reader: {
                        type: 'json',
                        root: 'data',

                    }
                }
            });
         store.load({
    params: {
        // specify params for the first page load if using paging
        start: 0,          
        limit: 2,

    }
});


        var classTable = Ext.create('Ext.grid.Panel', {
            style: 'border: solid Blue 1px',
            id: 'family',
            renderTo: Ext.getBody(),
            store: store,
             requires: [
        'Ext.ux.exporter.Exporter'
    ],

            columns: columnList,
            columnLines: true,
            width: Ext.getBody().getViewSize().width,
            height: Ext.getBody().getViewSize().height,
           bbar: {
                xtype: 'pagingtoolbar',
                pageSize: 2,
                store: store,
                displayInfo: true,
                plugins: new Ext.ux.ProgressBarPager()
            },
             dockedItems:[
                     {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'exporterbutton',
                        text: 'export data'
                    }
                         ]
                     }
                         ]


        });

    }
});




  &lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>