Sencha Touch常用面板 : 盒布局 水平盒布局

 

 
 /*********************2. 常用面板 :  盒布局   水平盒布局**********************************/
 
 var panel2=Ext.create('Ext.Panel',{
  id:'panel2',
  layout:{
   type:'hbox',
   align:'stretch'//指定容器中子组件的垂直对齐方式,默认值是center,表示子组件的纵向对齐方式是中央对齐
  },
  items:[
   {
    flex:1,//当使用水平盒布局方式时,该配置选项用来指定每一个子组件的宽度
    html:'子组件1',
    style:'background-color:#5a937c'
    
   },{
    flex:2,
    html:'子组件2',
    style:'background-color:#5E89ff'
   },{
    width:200,
    html:'子组件3',
    style:'background-color:#1E99rf'
   }
     
     
  ]
       
 });