在extjs 3.4中顯示一個PDF格式的表格

Question

我想用extjs 3.4創建一個表格，頂部有一個字段，中間是pdf。 顯示PDF是沒有問題的，帶有字段的表單是沒有問題的。將兩者放在一起並沒有奏效。 顯示pdf與面板一起工作，帶有字段的窗體是Ext.form.FormPanel。 如何在表單中嵌入pdf？ 這裏是我的嘗試：

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不匹配。 有沒有其他的選擇？

Answer 1

我找到了解決方案。 主要步驟是使用Ext.Panel而不是表單。

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 
         })