ExtJS 4.2 将网格数据导出到可下载的 CSV 文件

ExtJS 4.2 export grid data to downloadable CSV file

本文关键字：下载文件 CSV 网格数据 ExtJS 更新时间：2023-09-26

我想在我的EXT JS面板中创建一个下载按钮，当单击下载/导出EXTJS网格到可下载的CSV文件中时。PS：我认为我们可以使用商店数据或我在网格存储中填充数据的JSON将数据填充到CSV文件中我已经尝试过Ext.ux.CSVExporter，但我无法成功使用它。我当前的代码是：

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

<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager', {
    requires: ['Ext.ProgressBar'],
    /**
     * @cfg {Number} width
     * <p>The default progress bar width.  Default is 225.</p>
    */
    width   : 225,
    /**
     * @cfg {String} defaultText
    * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
     */
    defaultText    : 'Loading...',
    /**
     * @cfg {Object} defaultAnimCfg
     * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
     */
    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 > 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 < 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 < Object.keys(counter.levels[0].samples[0].features).length; p++)
         {
            var s = [];
            s["Sample v/s Feature"] = '<b>' + counter.levels[0].samples[0].features[p].name + '</b>';
            for (var j = 0; j < 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'
                    }
                         ]
                     }
                         ]

        });
    }
});


  </script>
  </head>
    <body>
    </body>
</html>

存储库链接使用此项目

这是如何使用它的示例小提琴链接

首先，将存储库文件复制到位于 ext/src/ux 中的 ext 库的 ux 文件夹中的导出器文件夹下。完整路径将是 ext/src/ux/exporter/[repository_files]并修改网格

  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: 'exrpot data'
                    }
                ]
            }
    ]
});