如何在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

问题是，你设置了flex：1。这将使属性flex：1到您的每个项目。这将强制它们捕获可用空间，相应地剩余空间，取决于设置的flex对象的数量。

就像你有，在你的情况下，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

施洛米。

Answer 2

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