extjs 上传电子表取得表中列头并与数据库字段做匹配的界面操作

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wyljz/article/details/80941398

这里写图片描述

var panel = Ext.create('Ext.panel.Panel', {
    region: 'center',
    flex: 1.3,
    title: '字段映射',
    margin: '1 1 1 1',
    items: [
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    id: 'updiv',
                    xtype: 'displayfield',
                    fieldLabel: '电子表',
                    value: '未选择',
                    flex: 1
                },
                {
                    xtype: 'button',
                    text: '选择文件',
                    margin: '2 10 0 0',
                    handler: function () {
                        var iframeid = 'iframe_upload';
                        var content = '<iframe scrolling="auto" frameborder="0" id="' + iframeid + '"  src="/frame/uploadFile" style="width:100%;height:100%;"></iframe>';
                        var win_up = Ext.create('Ext.window.Window', {
                            title: '选择文件并上传',
                            width: 350,
                            height: 250,
                            modal: true,
                            layout: 'fit',
                            items: [{
                                xtype: 'panel',
                                html: content
                            }],
                            buttons: [{
                                text: '确定',
                                handler: function () {
                                    excelUrl = $('#' + iframeid)[0].contentWindow.getUpfile();
                                    Ext.getCmp('updiv').setValue('<a href=/frame/getfile?url=' + excelUrl + ' target=_blank>' + excelUrl + '</a>');
                                    post('/frame/GetExcelSheet', { fpath: excelUrl }, function (data) {
                                        var estore = Ext.create('sheetStore');
                                        estore.add(data);
                                        Ext.getCmp('cmbSheet').setStore(estore);
                                        win_up.close();
                                    });
                                }
                            }]
                        }).show();
                    }
                }
            ]
        },
        {
            xtype: 'combo',
            id: 'cmbSheet',
            fieldLabel: '工作表',
            editable: false,
            emptyText: '--请选择--',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'name',
            forceSelection: true,
            triggerAction: 'last',
            listeners: {
                select: function (combo, record) {
                    post('/frame/GetExcelField', { fpath: excelUrl, sheet: record.get('name') }, function (data) {
                        var gridMatch = Ext.getCmp('gridMatch');
                        var fstore = gridMatch.getStore();
                        $.each(data, function (key, value) {
                            var fm = Ext.create('fieldMatchModel');
                            fm.set('EField', value.name);
                            fm.set('DField', '');
                            fstore.add(fm);
                        });
                    });
                }
            }
        },
        {
            xtype: 'grid',
            id: 'gridMatch',
            layout: 'fit',
            selModel: {
                type: 'cellmodel'
            },
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            store: Ext.create('fieldMatchStore'),
            columns: [
                { xtype: 'rownumberer' },
                { text: '电子表字段', dataIndex: 'EField' },
                {
                    text: '数据库字段', dataIndex: 'DField',
                    editor: {
                        xtype: 'combo',
                        store: storeField,
                        emptyText: '--请选择--',
                        queryMode: 'local',
                        displayField: 'value',
                        valueField: 'value',
                        forceSelection: true,
                        triggerAction: 'all',
                        editable: false
                    }
                }
            ]
        }
    ]
});

猜你喜欢

转载自blog.csdn.net/wyljz/article/details/80941398