Question

我想创建一个form，其中fields位于顶部，pdf位于中间ExtJS 3.4。显示pdf是没有问题的，带有form的{{1}}没问题，但将两者放在一起还不行。

显示fields适用于pdf，panel form是fields。

如何将Ext.form.FormPanel嵌入pdf？

以下是我尝试的内容：

form

决定性代码在最后几行。 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' } }] }] });与"autoel"不符。还有其他选择吗？

Answer 1

我找到了解决方案。主要步骤是使用Ext.Panel而不是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
});

在ExtJS 3.4中以表格形式显示pdf

1 个答案: