Javascript 如何使ExtJS表格布局的高度和宽度具有百分比而不是绝对值？

使用

Ext.Panel

和

表

布局，我能够以我想要的方式创建布局。但是，如何更改此代码，以便按比例定义宽度和高度？

e、 g.表格不应为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>

clearExtjsComponent（targetRegion）；
var table_wrapper2=新的外部面板({
id:'table_wrapper2'，
baseCls:“x平面”，
renderTo:Ext.getBody（），
布局：'表'，
layoutConfig:{columns:2}，
默认值：{
框架：对，
宽度：200，
身高：200，
样式：“边距：0 10px 10px 0”
},
项目：[{
标题：“购物车”，
宽度：400，
身高：290，
科尔斯潘：2
},{
标题：“发票地址”，
宽度：190，
身高：100
},{
标题：“交货地址”，
宽度：200，
身高：100
}
]
})
var table_wrapper=新的外部面板({
id:'table_wrapper'，
baseCls:“x平面”，
renderTo:Ext.getBody（），
布局：'表'，
layoutConfig:{columns:4}，
默认值：{
框架：对，
宽度：200，
身高：200，
样式：“边距：10px 0 0 10px”
},
项目：[{
标题:"订单",，
宽度：810，
科尔斯潘：4
},{
标题：“客户信息”，
宽度：400，
身高：400，
科尔斯潘：2
},{
//标题：“购物车”，
帧：假，
边界：错，
宽度：400，
身高：400，
科尔斯潘：2，
项目：[表2]
}
]
});
replaceComponentContent（targetRegion，表包装器）；
hideComponent（区域帮助）；

正如我在回复其他线程时所说，如果您想进行相对定位，使用vbox和hbox布局可能会更容易一些。此外，如果要将对象拉伸到窗口，请将其放置在视口中，该视口将自动使用整个窗口

您可能希望稍微更改布局（边框、帧），但对于vbox和hbox布局，它将是这样的：

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

        }
    ]
});

---

考虑改用

ColumnLayout

。这使您可以在像素和宽度百分比之间进行选择。

而不是：

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

试试这个：

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

---

试试这个简单的例子：

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'
    }]
});