1. 程式人生 > >extjs 上傳電子錶取得表中列頭並與資料庫欄位做匹配的介面操作

extjs 上傳電子錶取得表中列頭並與資料庫欄位做匹配的介面操作

這裡寫圖片描述

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 } } ] } ] });