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

Posted 2023-02-26

【中文标题】在 ExtJS 3.4 中以表格形式显示 pdf

【英文标题】：Display a pdf in a form in ExtJS 3.4

【发布时间】：2016-09-14 09:34:15

【问题描述】：

我想创建一个form，顶部有fields，中间有一个pdf，有ExtJS 3.4。 显示 pdf 没问题，form 和 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" 与 Ext.form.FormPanel 不匹配。 有其他选择吗？

【参考方案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
);