@H_301_1@使用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%'
- }
- }
- },