如何在Sencha touch中调整面板的高度和宽度？

Question

假设我有3个不同的面板[bottomCar0，bottomCar1，bottomCar2]，并希望根据我的要求调整它们的高度和宽度，我该怎么做？

我的代码：

var bottomCar=new Ext.Panel({  
      layout:{  
       type:'hbox',  
       align:'stretch'  
      },  
      defaults:{  
       flex:1 
      }, 
      items: [bottomCar0,bottomCar1,bottomCar2]  

     }); 

如何更改默认设置？

Thnaks
斯纳

Answer 1

的事情是，你设置好的柔性：1。这会给属性flex：1给你的每件物品。这将迫使他们捕获可用空间，相应的剩余空间除以所设置的弹性对象的数量。

如果你有，在你的情况下，3个flex：1的项目，每个将获得33％的可用高度。

您需要做的是从默认值中移除flex并将其赋予面板本身，而不是设置尺寸。

您可以将默认设置里面设置的高度和宽度，如果所有的人都将得到相同的值

defaults:{ 
    height: 200, 
    width: 300 
} 

或设置为每个项目的高度和宽度

items: [ 
    { 
     title: 'Home', 
     iconCls: 'home', 
     height: 200, 
     width: 300 
    }, 
    { 
     title: 'Contact', 
     iconCls: 'user', 
     html: 'Contact Screen', 
     height: 100, 
     width: 150 
    } 
] 

More on Flex

Shlomi。

Answer 2

或者您可以将“cls”添加到面板并在css文件中进行调整。