如何在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文件中進行調整。