Extjs：使用商店获取 csv 文件

Question

有没有办法在 ajax 商店获取 csv 文件？我想要的是获取 csv 文件，然后将其转换或转换为 JSON 但那是后面的部分。我尝试像 json 一样使用 csv reader 类型，但我认为这样的东西不可用。如果可以直接在 json 中获取商店的 csv，那也应该可以作为商店需要 JSON 格式的数据参考下面的代码或fiddle:

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Store fetching json data
        var store = Ext.create(Ext.data.Store, {
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    transform: function (data) {
                        Ext.create({
                                xtype: "textarea",
                                width: 200,
                                value: JSON.stringify(data),
                                renderTo: Ext.getBody()
                            });
                            return data;
                    }
                }
            }
        });

    //How to fetch csv file ?
        // var store = Ext.create(Ext.data.Store, {
        //     autoLoad: true,
        //     proxy: {
        //         type: 'ajax',
        //         url: 'SampleData.csv',
        //         reader: {
        //             //type: csv not available
        //             type: 'plaintext',
        //             transform: function (data) {
        //                 console.log(data);
        //                     return data;
        //             }
        //         }
        //     }
        // });
    }
});

Answer 1

我认为你必须实现一些自定义 reader，我们称它为 csvreader:

Ext.define('CsvReader', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.csvreader',

    getResponseData: function (response) {
        var characters = response.responseText.split('\n').reduce((akku, row) => {
            [name, email, phone] = row.split(',');
            akku.push({
                name: name,
                email: email,
                phone: phone
            });
            return akku;
        }, []);

        var json = {
            characters: characters
        };
        return json;
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Store fetching json data
        var store = Ext.create(Ext.data.Store, {
            autoLoad: true,
            fields: ['name', 'email', 'phone'],
            proxy: {
                type: 'ajax',
                url: 'SampleData.csv',
                reader: {
                    type: 'csvreader',
                    rootProperty: 'characters'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            renderTo: document.body,
            width: "100%",
            height: 300,

            columns: [{
                text: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }]
        });
    }
});

SampleData.csv 文件的内容如下：

Lisa,lisa@simpsons.com,555-111-1224
Bart,bart@simpsons.com,555-222-1234
Homer,home@simpsons.com,555-222-1244
Marge,marge@simpsons.com,555-222-1254

Extjs：使用商店获取 csv 文件

Extjs: Fetch csv file using store

javascript

csv

extjs