使用Ext.Panel和表格布局,我能够按照我想要的方式创建布局.但是,如何更改此代码以便我可以按比例定义宽度和高度？
例如表不应该是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',layoutConfig: {columns:4},style: 'margin: 10px 0 0 10px'
},items:[{
title:'Orders',width: 810,colspan: 4
},{
title:'Customer Information',height: 400,{
//title:'Shopping Cart',frame: false,border: false,colspan: 2,items: [ table_wrapper2 ]
}
]
});
replaceComponentContent(targetRegion,table_wrapper);
hideComponent(regionHelp);
</script>
解决方法
代替 ：
layout:'table',
试试这个 ：
layout: {
type: 'table',columns: 3,tableAttrs: {
style: {
width: '100%',height: '100%'
}
}
},
