如何使ExtJS表格佈局具有百分比而不是絕對值的高度和寬度？

Question

使用Ext.Panel和table佈局，我能夠按照我想要的方式創建佈局。但是，如何更改此代碼以便我可以按比例定義寬度和高度？

例如表格不應該是800像素，而應該是屏幕寬度的100％，而每個框不應該是200像素，而是25％。

這裏是代碼：

<script type="text/javascript"> 

    clearExtjsComponent(targetRegion); 

    var table_wrapper2 = new Ext.Panel({ 
     id: 'table_wrapper2', 
     baseCls: 'x-plain', 
     renderTo: Ext.getBody(), 
     layout:'table', 
     layoutConfig: {columns:2}, 
     defaults: { 
      frame:true, 
      width:200, 
      height: 200, 
      style: 'margin: 0 10px 10px 0' 
     }, 
     items:[{ 
       title:'Shopping Cart', 
       width: 400, 
       height: 290, 
       colspan: 2 
      },{ 
       title:'Invoice Address', 
       width: 190, 
       height: 100 
      },{ 
       title:'Delivery Address', 
       width: 200, 
       height: 100 
      } 
     ] 
    }) 

    var table_wrapper = new Ext.Panel({ 
     id:'table_wrapper', 
     baseCls:'x-plain', 
     renderTo: Ext.getBody(), 
     layout:'table', 
     layoutConfig: {columns:4}, 
     defaults: { 
      frame:true, 
      width:200, 
      height: 200, 
      style: 'margin: 10px 0 0 10px' 
     }, 
     items:[{ 
       title:'Orders', 
       width: 810, 
       colspan: 4 
      },{ 
       title:'Customer Information', 
       width: 400, 
       height: 400, 
       colspan: 2 
      },{ 
       //title:'Shopping Cart', 
       frame: false, 
       border: false, 
       width: 400, 
       height: 400, 
       colspan: 2, 
       items: [ table_wrapper2 ] 
      } 
     ] 
    }); 

    replaceComponentContent(targetRegion, table_wrapper); 

    hideComponent(regionHelp); 

</script> 

Answer 1

就像我用VBOX和橫向盒的佈局，如果你想要做的相對定位可能是你很容易就能在回答您的其他線程說。另外，如果你想把東西拉伸到你的窗口，把它放在一個視口中，它會自動使用你的整個窗口。

您可能要更改佈局的位（邊框，框），但與VBOX和橫向盒的佈局將是這樣的：

new Ext.Viewport({ 
    layout: 'vbox', 
    layoutConfig: { 
     align : 'stretch', 
     pack : 'start' 
    }, 
    defaults: { 
     style: 'margin: 10px 0 0 10px' 
    }, 
    items:[{ 
      title:'Orders', 
      height: 200 
     },{ 
      layout: 'hbox', 
      flex: 1, 
      layoutConfig: { 
       align : 'stretch', 
       pack : 'start' 
      }, 
      items: [{ 
       title:'Customer Information', 
       flex: 1 
      },{ 
       layout: 'vbox', 
       flex: 1, 
       layoutConfig: { 
        align : 'stretch', 
        pack : 'start' 
       }, 
       items: [{ 
        title: 'Shopping cart', 
        height: 200 
       },{ 
        layout: 'hbox', 
        flex: 1, 
        layoutConfig: { 
         align : 'stretch', 
         pack : 'start' 
        }, 
        items: [{ 
         title: 'Invoice address', 
         flex: 1 
        },{ 
         title: 'Delivery address', 
         flex: 1 
        }] 
       }] 
      }] 

     } 
    ] 
}); 

Answer 2

考慮使用ColumnLayout代替。這給你一個像素和寬度百分比之間的選擇。

Answer 3

相反的：

layout:'table', 
    layoutConfig: {columns:2}, 

試試這個：

layout: { 
     type: 'table', 
     columns: 3, 
     tableAttrs: { 
      style: { 
      width: '100%', 
      height: '100%' 
      } 
     } 
    }, 

Answer 4

試試這個小提琴例如： https://fiddle.sencha.com/#fiddle/2dm

Ext.create('Ext.panel.Panel', { 
    title: 'Car Simple Tree', 
    height: 200, //Fixed height for this panel 
    renderTo: Ext.getBody(), 
    layout: { 
     type: 'table', 
     columns: 2, 
     tableAttrs: { 
      style: { 
       width: '100%' // To make the cell width 100% 
      } 
     } 
    }, 
    items: [{ 
     xtype: 'panel', 
     title: 'panel title', 
     collapsible: true, 
     titleCollapse: true, 
     bodyStyle: { 
      background: '#D9E5F3', 
      borderColor: '#99BCE8', 
      borderWidth: '1px' 
     }, 
     //scrollable: true, 
     //autoScroll: true, 
     layout: { 
      pack: 'center', 
      type: 'hbox' 
     }, 
     rowspan: 1, 
     colspan: 2, 
     width: '100%', 
     items: [{ 
      text: 'Save', 
      xtype: 'button', 
      padding: 5 
     }] 
    }, { 
     html: 'Cell C content', 
     cellCls: 'highlight' 
    }, { 
     html: 'Cell D content' 
    }] 
});