Display a pdf in a form in ExtJS 3.4 - pdf

Question

I would like to create a form with fields at top and a pdf in the middle with ExtJS 3.4.
Displaying a pdf is no problem, a form with fields is no problem but putting both together did not work yet.
Displaying a pdf works with a panel, a form with fields is a Ext.form.FormPanel.
How can I embed the pdf in the form?
Here is what I tried:
var pdfForm = new Ext.form.FormPanel({
id: 'pdfForm',
width: 700,
cloasable: false,
waitMsgTarget: true,
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Z',
id: 'Z',
name: 'Z',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'X',
name: 'X',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Y',
name: 'y',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'M',
name: 'M',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'tabpanel',
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 100%; width: 100%',
src: 'http://' + serverIP + '/documents/18/bc1bca0a-d437-4505-aee4-9cbe63553a6d'
}
}]
}]
});
The decisive code is in the last few lines. "autoel" does not match with the Ext.form.FormPanel.
Are there any alternatives?

Answer 1

I found the solution.
The main step is to use an Ext.Panel instead of a form.
var formPanel = new Ext.Panel({
frame: true,
renderTo: 'formPanel',
scrollable: 'true',
title: '',
id: 'mainPanel',
autoHeight: true,
autoWidth: true,
layout: 'form',
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '1',
id: '1',
name: '1',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '2',
name: '2',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'box',
autoEl: {
tag: 'embed',
id: '3',
name: '3',
style: 'height: 100%; width: 100%',
type: 'application/pdf',
src: 'http://<ip>/<path>.pdf'
}
}]
});
var pdfDlg = new Ext.Window({
id: 'pdfDialog',
title: 'PDF',
layout: 'fit',
width: 1000,
height: 700,
minWidth: 1000,
minHeight: 500,
closeAction: 'hide',
closable: true,
resizable: false,
plain: true,
modal: true,
items: 'mainPanel',
constrainHeader: true
});