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

前端之家收集整理的这篇文章主要介绍了javascript – 如何使ExtJS表格布局具有百分比而不是高度和宽度的绝对值?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_1@使用Ext.Panel和表格布局,我能够按照我想要的方式创建布局.但是,如何更改此代码以便我可以按比例定义宽度和高度?

例如表不应该是800像素而是100%的屏幕宽度,每个框不是200像素而是25%.

这是代码

  1. <script type="text/javascript">
  2.  
  3. clearExtjsComponent(targetRegion);
  4.  
  5. var table_wrapper2 = new Ext.Panel({
  6. id: 'table_wrapper2',baseCls: 'x-plain',renderTo: Ext.getBody(),layout:'table',layoutConfig: {columns:2},defaults: {
  7. frame:true,width:200,height: 200,style: 'margin: 0 10px 10px 0'
  8. },items:[{
  9. title:'Shopping Cart',width: 400,height: 290,colspan: 2
  10. },{
  11. title:'Invoice Address',width: 190,height: 100
  12. },{
  13. title:'Delivery Address',width: 200,height: 100
  14. }
  15. ]
  16. })
  17.  
  18. var table_wrapper = new Ext.Panel({
  19. id:'table_wrapper',baseCls:'x-plain',layoutConfig: {columns:4},style: 'margin: 10px 0 0 10px'
  20. },items:[{
  21. title:'Orders',width: 810,colspan: 4
  22. },{
  23. title:'Customer Information',height: 400,{
  24. //title:'Shopping Cart',frame: false,border: false,colspan: 2,items: [ table_wrapper2 ]
  25. }
  26. ]
  27. });
  28.  
  29. replaceComponentContent(targetRegion,table_wrapper);
  30.  
  31. hideComponent(regionHelp);
  32.  
  33. </script>

解决方法

代替 :
  1. layout:'table',

试试这个 :

  1. layout: {
  2. type: 'table',columns: 3,tableAttrs: {
  3. style: {
  4. width: '100%',height: '100%'
  5. }
  6. }
  7. },

猜你在找的JavaScript相关文章