HTML表格到ExtJS表格

我有一個html格式的字段非常分散。該頁面已使用html表格 - rowspan和colspan組合創建。HTML表格到ExtJS表格

我需要將此窗體轉換爲ExtJS並將其顯示在窗口中。

經過一番研究，我覺得桌面佈局可能是定位場地的最佳選擇。但是，有一些我一直面臨如下幾個問題：

如果我給行跨度和列跨度爲2個或更多，然後還字段大小不增加佔用空間速效和仍然侷限於單柱。
如果我調整窗口的大小，那麼表格不會調整大小（儘管窗體會在頂部顯示的tbar展開以佔據整個空間）。

我已經使用佈局作爲適合窗口和佈局作爲表格的表格。

我也嘗試過使用'錨'佈局窗體，然後有一個fieldset與表佈局，但定位不起作用。

難道有人可以對此進行一些說明。以下是我使用的是基本的代碼片段：

var form = Ext.create('Ext.form.Panel', { 
            url:'voyage_berth_monitoring.php', 
            fieldDefaults: { 
             labelAlign: 'right' 
            }, 
            layout:{ 
             type:'table', 
             columns:3 
            }, 
            defaults:{ 
             anchor:'100%' 
            }, 
            tbar:[ 
             { 
              xtype:'button', 
              text:'Clear' 
             }, 
             { 
              xtype:'button', 
              text:'Delete' 
             }, 
             { 
              xtype:'tbfill' 
             }, 
             { 
              xtype:'button', 
              text:'Save' 
             }, 
             { 
              xtype:'button', 
              text:'Exit' 
             } 
            ], 
            items: [ 


               { 
                 fieldLabel:'item', 
                 xtype:'textfield' 

               }, 
               { 
                 fieldLabel:'item', 
                 xtype:'textfield', 
                 colspan:2 

               }, 
               { 
                 fieldLabel:'item', 
                 xtype:'textfield' 

               }, 
               { 
                 fieldLabel:'item', 
                 xtype:'textfield' 

               }, 
               { 
                 fieldLabel:'item', 
                 xtype:'textfield' 

               } 


            ] 
           }); 



var win = Ext.create('Ext.window.Window', { 
          title: 'Window', 
          closable: true, 
          closeAction:'hide', 
          minimizable:true, 
          maximizable:true, 
          height:350, 
          width:750, 
          layout:'fit', 
          autoScroll:true, 
          items: form 
         }); 

win.show();

來源

2011-08-19 netemp

已經看：'HTTP：//dev.sencha .com/deploy/ext-4.0.0/examples/form/dynamic.html「Form 3將會有所幫助。還可以令頂視口：'Ext.create（ 'Ext.Viewport'，{ \t佈局： '適應'， \t項目：[頂]， \t renderTo：Ext.getBody（） \t}）; ' –

謝謝你的幫助Xupypr。我已經嘗試過了，但是這個結構也不允許像HTML表格標籤那樣的靈活性，我們可以控制頁面的每一部分。而且，在頁面中使用大量容器來進行期望的定位也使得它有點複雜。這種靈活性是不是可以通過extjs的表格佈局來實現的？ – netemp

基本上我有與佈局表相同的問題，無法找到任何方式跨越我的顯示字段到td的長度，也是與2列字段相同的問題。

我者優先的解決方案是在擴展表佈局，並給它靈活性

Ext.define('Extended.TableLayout', { 
    alias:'layout.extendedTable', 
    extend: 'Ext.layout.container.Table', 
    type: 'extendedTable', 
    columns: 2, 
    rightMargin: 20, 
    tableAttrs:{ 
     width: '100%' 
    }, 
    tdAttrs:{ 
     width:'50%' 
    }, 
    itemCls:'x-table-cell', 
    renderItems: function(items) { 

     var totalWidth = this.getLayoutTargetSize().width, 
      len = items.length, 
      i, item, colNr; 

     for (i = 0; i < len; i++) { 
      item = items[i]; 

       colNr = this.columns; 
      if ((colNr > 1) && Ext.isNumber(item.colspan)) { 
       colNr = colNr - item.colspan + 1; 
      } 
      item.width = Math.floor(totalWidth/colNr) - this.rightMargin; 
     } 
     this.callParent(arguments); 
    } 
});

使用extendedTable佈局我想要的外觀

來源

2011-08-19 14:02:28 nscrob

擴展是非常好的Nscrob。感謝分享它。雖然，我通過使用列和hbox佈局的組合來滿足我的目的。但肯定很可能會爲您爲未來應用創建的東西奠定基礎。 – netemp

一種替代它系列化你的HTML表單數據，JSON，並將其加載到EXT店。一旦進入商店，EXT會樂意爲您做任何事情。

來源

2011-08-19 13:43:32

感謝Diodeus，但這樣做可能會違反將「視圖」部分與其他應用程序分開的規則。 – netemp

HTML表格到ExtJS表格

回答

相關問題