extjs 上傳電子錶取得表中列頭並與資料庫欄位做匹配的介面操作
阿新 • • 發佈:2019-01-04
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
}
}
]
}
]
});