How to make an ExtJS table layout have percentage instead of absolute values for height and width?

Question

Using Ext.Panel and the table layout, I was able to create a layout just the way I want. However, how do I change this code so that I can define the widths and heights proportionally?

e.g. the table should not be 800 pixels but 100% of the screen width, and each box not 200 pixels but 25%.

here is the code:

<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

Instead of :

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

try this :

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