堆栈内存溢出
  繁体   English   中英

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

[英]ExtJS 4.2 export grid data to downloadable CSV file

 原文  2016-02-20 16:52:34  7   1    javascript/ extjs/ extjs4/ extjs4.1/ extjs4.2

问题描述

我想在我的EXT JS面板中创建一个下载按钮，单击下载/将EXTJS网格导出/导出到可下载的CSV文件中时，该按钮即可。 PS：我认为我们可以使用存储数据或从JSON将数据填充到网格存储中的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>

1 个解决方案

解决方案1
 0 已采纳  2016-02-20 18:04:45

资料库链接使用此项目

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

首先将存储库文件复制到位于ext / src / ux的ext库的ux文件夹中，该文件夹位于exporter文件夹下。 完整路径将为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'
                    }
                ]
            }
    ]

});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从（CSV文件1）中的可下载CSV超链接将行和列导出到（CSV文件2） 无限网格的ExtJS 4.2滚动条 EXTJS 4.2 - 网格面板多个网格排序 仅使用Javascript / JQuery将网格数据导出到CSV文件并以扩展名.csv保存 如何将从SVG元素和csv文件生成的PNG图像导出到可下载的ZIP文件 将具有 2 个数据的单元格导出到 csv ag 网格 可通过Ajax下载CSV文件 ExtJS 4.2 - 使用当前变量存储刷新网格 Extjs 4.2自动同步动态网格存储 如何导出 angularjs UI Grid CSV 文件或 PDF 文件中的所有数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM