将拉力赛网格信息导出为CSV

时间:2014-03-17 20:30:26

标签: extjs rally extjs4.2

我正在尝试将网格数据输出到csv。这是我的代码:

Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:[{ xtype: 'container', itemId: 'print_button_box', padding: 5},{xtype: 'container', itemId: 'grid_box'}],
count: 0,
globalStore: null,
launch: function() {
    this.globalStore = null;
    this.count = 0;
    this._addPrintButton();
     list = [];
    //Write app code here
    this._get_stories_of_feature();
},
_addPrintButton: function() {
    var me = this;
    this.down('#print_button_box').add( { 
        xtype: 'rallybutton', 
        itemId: 'print_button',
        text: 'CSV',
        disabled: false,
        handler: function() {
           console.log('globalStore ',me.globalStore);

            me._onClickExport();
        }
    });
},
_onClickExport: function () { //using this function to export to csv

     if (document.getElementById('grid_box')) {

        //Ext.getBody().mask('Exporting Tasks...');
        console.log('inside export');
        setTimeout(function () {
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-' +
                'microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head>' +
                '<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>' +
                '{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>' +
                '</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}' +
                '</table></body></html>';

            var base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)));
            };
            var format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                });
            };
            var table = document.getElementById('grid_box');
            console.log("Exporting table ",table);
            var excel_data = '<tr>';
            Ext.Array.each(table.innerHTML.match(/<span .*?x-column-header-text.*?>.*?<\/span>/gm), function (column_header_span) {
                excel_data += (column_header_span.replace(/span/g, 'td'));
            });
            excel_data += '</tr>';
            Ext.Array.each(table.innerHTML.match(/<tr class="x-grid-row.*?<\/tr>/gm), function (line) {
                excel_data += line.replace(/[^\011\012\015\040-\177]/g, '>>');
            });
            console.log("Excel data ",excel_data);
            var ctx = {worksheet: name || 'Worksheet', table: excel_data};
            window.location.href = 'data:application/vnd.ms-excel;base64,' + base64(format(template, ctx));
            Ext.getBody().unmask();
        }, 500);
    }else{
        console.log("grid_box does not exist");
    }
},
_createStore: function(){
    var me = this;
    //var f = [{property: 'UserStories', operator: '!=', value: null}];
    Ext.create('Rally.data.WsapiDataStore',{
        autoLoad: true,
        model: "PortfolioItem/Feature",
        limit: 5000,
        fetch: ['FormattedID','Name','UserStories','c_DIteration','c_DPSI'],


        listeners:{
            load: function(store,data,success){

                console.log("Store ",store);
                var data_length = data.length;
                console.log('Data length is '+data.length);
                Ext.Array.each(data,function(item){
                    if(item.get('UserStories')==null){
                        store.remove(item);
                    }else{
                        var data = {
                            id: item.get("FormattedID"),
                            name: item.get("Name"),
                            UserStories: item.get("UserStories")._type,
                            DIteration: item.get("c_DIteration"),
                            DPSI: item.get("c_DPSI")
                        };
                        //list.push(data);
                    }


                    me._get_stories_of_feature(item.get("ObjectID"),item.get("Name"),data_length);
                });

            },
            scope: this
        }
    });
},
_showGrid: function(store){
    var me = this;
    if(!this.grid){
        this.grid = Ext.create('Rally.ui.grid.Grid',{
            store: store,
            columnCfgs:[
                {text: 'Feature_ID', dataIndex: 'ide'},
                {text: 'Feature Name', dataIndex: 'name'},
                {text: 'Feature DIteration', dataInfex: 'fDIteration'},
                {text: 'Story Name', dataIndex: 'UserStories'},
                {text: 'Story ID', dataIndex: 'FormattedID'},

                {text: 'Story DIteration', dataIndex: 'DIteration'},
                {text: 'Story DPSI', dataIndex: 'DPSI'},
                {text: 'Unscheduled', dataIndex: 'Unscheduled'}
            ]
        });
        me.globalStore = this.grid;
        this.down('#grid_box').add(this.grid);
    }
},
_get_stories_of_feature: function(){
    var me = this;
    Ext.create('Rally.data.WsapiDataStore',{
        autoLoad: true,
        model: "hierarchicalrequirement",
        limit: 5000,
        fetch: ['Name','ObjectID','FormattedID','Feature','c_DIteration','c_DPSI','DragAndDropRank'],
        sorters:[{
            property: 'DragAndDropRank', direction: 'ASC'
        }],
        filters:{
            property: 'Feature', operator: '!=', value:null
        },
        listeners:{
            load: function(store,data,success){
                var data_length = data.length;

                if(data_length>0){
                    console.log("Total stories ",data_length);
                    for(var i=0;i<data_length;i++){

                            var flag;
                            if(data[i].data.Feature.c_DIteration==null || data[i].data.Feature.c_DIteration.toString().indexOf("*")!=-1)
                                 flag = "YES";
                            else flag = "NO";

                            var element = {
                                ide: data[i].data.Feature.FormattedID,
                                name: data[i].data.Feature.Name,
                                fDIteration: data[i].data.Feature.c_DIteration,
                                UserStories: data[i].data.Name,
                                FormattedID: data[i].data.FormattedID,
                                DIteration: data[i].data.c_DIteration,
                                DPSI: data[i].data.c_DPSI,
                                Unscheduled: flag                                   
                            };
                            list.push(element);

                            console.log("me count is ",me.count);
                            console.log("Found ",data[i].data);
                            me.count++;
                    }
                }

                if(me.count==data_length){
                    console.log("Building store");
                    //once all the stories and feature data is computed
                    var myStore = Ext.create("Rally.data.custom.Store",{
                    data: list,
                    pageSize: 100
                });
                me._showGrid(myStore);  
                }


            }

        }
    });
},
 exportGrid: function(grid) {
    if (Ext.isIE) {
        this._ieToExcel(grid);

    } else {
        var data = this._getCSV(grid);
        var a = document.createElement('a');
        a.href     = 'data:attachment/csv,' + data;
        a.target   ='_blank';
        a.download = 'myFile.csv,' + encodeURIComponent(data); ;
        a.innerHTML = "Click me to download the file.";
        window.location = a;
    }
},

_escapeForCSV: function(string) {
    if (string.match(/,/)) {
        if (!string.match(/"/)) {
            string = '"' + string + '"';
        } else {
            string = string.replace(/,/g, ''); // comma's and quotes-- sorry, just loose the commas
        }
    }
    return string;
},

_getFieldText: function(fieldData) {
    var text;

    if (fieldData == null || fieldData == undefined) {
        text = '';

    } else if (fieldData._refObjectName && !fieldData.getMonth) {
        text = fieldData._refObjectName;

    } else if (fieldData instanceof Date) {
        text = Ext.Date.format(fieldData, this.dateFormat);

    } else if (!fieldData.match) { // not a string or object we recognize...bank it out
        text = '';

    } else {
        text = fieldData;
    }

    return text;
},

_getFieldTextAndEscape: function(fieldData) {
    var string  = this._getFieldText(fieldData);

    return this._escapeForCSV(string);
},

_getCSV: function (grid) {
    var cols    = grid.columns;
    var store   = grid.store;
    var data    = '';

    var that = this;
    Ext.Array.each(cols, function(col, index) {
        if (col.hidden != true) {
            data += that._getFieldTextAndEscape(col.text) + ',';
        }
    });
    data += "\n";

    store.each(function(record) {
        var entry       = record.getData();
        Ext.Array.each(cols, function(col, index) {
            if (col.hidden != true) {
                var fieldName   = col.dataIndex;
                var text        = entry[fieldName];

                data += that._getFieldTextAndEscape(text) + ',';
            }
        });
        data += "\n";
    });

    return data;
},

_ieGetGridData : function(grid, sheet) {
    var that            = this;
    var resourceItems   = grid.store.data.items;
    var cols            = grid.columns;

    Ext.Array.each(cols, function(col, colIndex) {
        if (col.hidden != true) {
            console.log('header: ', col.text);
            sheet.cells(1,colIndex + 1).value = col.text;
        }
    });

    var rowIndex = 2;
    grid.store.each(function(record) {
        var entry   = record.getData();

        Ext.Array.each(cols, function(col, colIndex) {
            if (col.hidden != true) {
                var fieldName   = col.dataIndex;
                var text        = entry[fieldName];
                var value       = that._getFieldText(text);

                sheet.cells(rowIndex, colIndex+1).value = value;
            }
        });
        rowIndex++;
    });
},

_ieToExcel: function (grid) {
    if (window.ActiveXObject){
        var  xlApp, xlBook;
        try {
            xlApp = new ActiveXObject("Excel.Application"); 
            xlBook = xlApp.Workbooks.Add();
        } catch (e) {
            Ext.Msg.alert('Error', 'For the export to work in IE, you have to enable a security setting called "Initialize and script ActiveX control not marked as safe" from Internet Options -> Security -> Custom level..."');
            return;
        }

        xlBook.worksheets("Sheet1").activate;
        var XlSheet = xlBook.activeSheet;
        xlApp.visible = true; 

       this._ieGetGridData(grid, XlSheet);
       XlSheet.columns.autofit; 
    }
}

});

我正在使用“_onClickExport”函数,我读到here将我的网格数据导出为CSV但是当我执行该函数时,它找不到ElementId“grid_box”,尽管我已经定义了它。

1 个答案:

答案 0 :(得分:1)

我可以在进行这些更改后使用您的代码导出:

第31行,改为

if (this.down('#grid_box')){

第52行,改为

var table = that.getComponent('grid_box');

_onClickExport

的顶部定义
var that = this;

第57行及其下方的类似行,将table.innerHTML.match替换为table.getEl().dom.outerHTML.match

Ext.Array.each(table.getEl().dom.outerHTML.match