PDA

View Full Version : Display a pdf in a form in extjs 3.4



Kalleinz
14 Sep 2016, 10:01 PM
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. 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?

Gary Schlosberg
15 Sep 2016, 7:15 AM
You are setting the 'region' config on panels but aren't using a border layout. Were you testing other layouts?

Kalleinz
26 Sep 2016, 4:10 AM
Yes, I tried "column", "form", "border" and "auto".
Xtype is "tabpanel". Might this be the problem?

Kalleinz
26 Sep 2016, 4:11 AM
On the page "http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Component" the xtypes are not listed, though they are claimed to be.

Gary Schlosberg
26 Sep 2016, 5:42 AM
When I go to that link, I see an organized list of xtypes. Are you not seeing them?
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Component

Kalleinz
28 Sep 2016, 5:44 AM
Yes, I see them in your link, but not in this one in the docs:
55211

Anyway, I found the solution. It is:

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',
//layout: 'panel',
//xtype: 'form',
//items:[{
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
})

The main step was to use a panel.

Thanks for support.